betaPublic beta opens soon - reserve your seat

Show technical explanations withcinematic clarity.

TechExplain captures complex ideas - code paths, architectures, runbooks - and shapes them into immersive stories. Blend visuals, canvas motion, and narration in one editor built with Next.js 15, Fabric.js, and Shiki.

Try the live editorSee how it works
2x
High-res PNG export today
40+
Syntax & surface themes
Beta
MP4 + HTML journeys next
Live previewAI assist
annotation.ts
import { createRecording } from "@techexplain/api";

export async function renderExplanation(snippet: string) {
  const session = await createRecording({
    snippet,
    theme: "night-owl",
    annotations: [
      { text: "Glow callout", target: "line:12", tone: "neon" },
      { text: "Arrow to API edge", target: "line:18", tone: "sky" },
    ],
  });

  return session.export({ format: "png", quality: "2x" });
}
Bezier arrow snapped to `handleExport`
Night Owl theme + glass frame applied

Narrate technical stories

Fabric.js layers let you bend arrows, bracket flows, and spotlight each insight across code, APIs, and diagrams.

Design polished visuals

Shiki surfaces, Tailwind canvases, and luminous frames style walkthroughs, architecture, and snippet tours alike.

Deliver anywhere

Export polished PNGs today and queue MP4 + interactive explainers that drop seamlessly into docs, decks, and LMS portals.

Platform pillars

Built for designers who write code and developers who teach.

Explore quickstart

Story-driven canvas

Work inside Annotate, Style, and Preview lanes to choreograph explanations end-to-end.

  • Curved arrows, neon glows, and bracket callouts powered by Fabric.js
  • Magnetic alignment and layer sync keep diagrams, snippets, and callouts in lockstep
  • Keyboard cues surface precise controls the moment you narrate a new step

Cinematic visuals

Tailor every frame to your brand with on-demand themes and device chrome.

  • Shiki renders 40+ syntax palettes with zero blurs or artifacts
  • Mesh gradients, glass panels, and window frames for browser, IDE, dashboard, or phone
  • Responsive padding, shadows, and corners tuned for social posts, docs, and slide decks

Publish-ready workflow

Keep every explanation versioned, exportable, and ready for stakeholders.

  • Instant 2x PNG export plus queued MP4 + HTML journeys
  • Supabase project saves (rolling out) with team-ready permissions
  • API hooks planned for docs sites, LMS embeds, internal portals, and knowledge bases
How it works

From raw material to cinematic explanation in three steps.

Watch the demo
01

Drop in your material

Paste code, architecture notes, API flows, or onboarding steps. Shiki styles snippets instantly while the canvas frames everything else.

02

Layer context beautifully

Sketch arrows, highlights, and voiceovers while the canvas snaps to tokens, cards, and layout guides.

03

Share the story

Export high-res imagery today and schedule interactive walkthroughs or MP4 explainers straight from the project.

Who it's for

Built with multi-disciplinary teams in mind.

DevRel & educators

Craft lesson visuals that match your voice and share-ready docs in minutes, not hours.

Engineering teams

Standardize architecture handoffs with annotated canvases synced to real code.

Content creators

Produce scroll-stopping snippets for launch threads, course slides, and newsletters.

Security analysts

Highlight exploit paths with precise callouts and ready-to-share reporting assets.

Choose the plan that fits your team

Start for free, upgrade when you need more power

Free

Perfect for getting started

$0/month
  • Projects
    5 projects
  • Storage
    100 MB
  • Export Quality
    1080p
  • Recording Duration
    5 minutes
  • Watermark
    TechExplain branding
  • Templates
    Basic templates
  • Cloud Storage
  • Priority Support
  • API Access
  • Collaboration
Current Plan
Most Popular

Pro

For professionals and teams

$19/month
  • Projects
    Unlimited projects
  • Storage
    10 GB
  • Export Quality
    4K Ultra HD
  • Recording Duration
    60 minutes
  • Watermark
    No watermark
  • Templates
    Premium templates
  • Cloud Storage
  • Priority Support
  • API Access
  • Collaboration
Upgrade to Pro

Frequently asked questions

Can I cancel anytime?

Yes! You can cancel your Pro subscription at any time. You'll continue to have access to Pro features until the end of your billing period.

What happens to my projects if I downgrade?

Your projects remain safe. If you exceed the free tier limits after downgrading, you won't be able to create new projects until you're within the limits or upgrade again.

Do you offer team plans?

Team and enterprise plans are coming soon! Contact us for early access.

Is there a trial period?

We offer a generous free tier so you can try TechExplain Studio before upgrading. All core features are available in the free plan with reasonable limits.

Beta promises

We're building TechExplain with transparency and craft.

Follow the docs and roadmap to see what's shipping next, and drop feedback straight into the editor while you create.

Secure by default

Environment secrets stay in local `.env` files, and Supabase keys never touch the repo.

Roadmap transparency

Team spaces, Supabase persistence, and MP4 export timelines live in the public roadmap.

Preview what ships next

Prototype features hit the homepage first so you can request access or leave feedback early.

Ready to transform the way you explain technical work?

Join the beta list, unlock the editor, and start publishing annotated stories your team and community will remember.

Reserve beta accessReview docs