CodeBit

Tell a story with your code. CodeBit turns markdown-defined code snippets into animated videos you can share with your community.

Try it live at codebit.xyz.

Features

• Write code sequences in plain Markdown — no new syntax to learn
• Live preview with typing animations between steps
• Customizable colors, fonts, backgrounds, and highlight themes
• Export as MP4 video, rendered entirely in your browser
• 100% free, no account, no sign-up — everything runs client-side

Stack

• Build / dev: Vite + React 18
• Routing: TanStack Router (code-based)
• Styling: Tailwind CSS + shadcn/ui
• Editor: Monaco
• Video pipeline: Remotion — @remotion/player for preview, @remotion/web-renderer (WebCodecs) for in-browser MP4 export
• Persistence: localStorage — no backend
• Tests: Jest + ts-jest + jsdom
• Language: TypeScript

Run it locally

git clone https://github.com/scastiel/codebit.git
cd codebit
npm install
npm run dev

The app will be available at http://localhost:3000.

Scripts

• npm run dev — start the Vite dev server
• npm run build — type-check and build to dist/
• npm start — preview the production build
• npm run lint — run ESLint
• npm test — run the Jest test suite
• npm run remotion-studio — open Remotion Studio to preview the composition in isolation

Environment variables

Both are optional:

• VITE_BASE_URL — absolute URL used by the video watermark (defaults to http://localhost:3000)
• VITE_PLAUSIBLE_DOMAIN — enables Plausible Analytics injection if set

Sponsor

CodeBit is free and open source. If you enjoy using it, you can sponsor me on GitHub to support its development. ♥

License

MIT — see LICENSE if present, otherwise consider the code MIT-licensed.

Credits

Made with ♥ in Montreal by @scastiel and @maxday.