MIT Open Source · Self-Hostable
Open Source on GitHub
KromaStudio is MIT licensed — inspect the code, fork it, contribute, or self-host your own instance. We believe developer tools should be open, transparent, and respect your privacy. Everything from syntax highlighting to video export runs 100% locally in your browser.
Repository
github.com/Ritesh0888/kroma-studioWhat You'll Find in the Source
- Full Next.js source code for the studio editor and all marketing landing pages.
- 100% client-side rendering architecture — zero backend processing.
- Implementations of Shiki syntax highlighting, Framer Motion animations, and Canvas manipulations.
- MIT License — free to use, modify, and self-host for your own personal or commercial projects.
Our Tech Stack
We built KromaStudio using modern tools to ensure a fast, robust, and beautiful experience that lives entirely in the browser. Here is what makes the magic happen:
| Category | Technology | Why we use it |
|---|---|---|
| Framework | Next.js 16 (App Router) | React framework for production. We rely on the App Router for clean routing and layout structures without any server-side rendering for the core studio logic. |
| UI & Styling | React 19 + Tailwind CSS 4 | Modern component architecture combined with the latest utility-first CSS framework for fast, consistent, and responsive design. |
| State Management | Zustand 5 | A small, fast, and scalable bearbones state-management solution. Used to keep the studio canvas in sync with the sidebar controls. |
| Syntax Highlighting | Shiki 4 | A beautiful and powerful syntax highlighter based on TextMate grammars. Provides the core magic behind our 15 built-in themes and accurate tokenization. |
| Animations | Framer Motion 12 | Production-ready motion library for React. Powers the 3D Tilt, Auto Scroll, and Float animations before they are exported as video. |
| Export (Image) | html-to-image | Generates an image from a DOM node using HTML5 canvas and SVG. We use it to produce high-resolution, 2× PNG exports of your code snippets and mockups. |
| Export (Video) | MediaRecorder API + Canvas captureStream | Native browser APIs to record the animated DOM elements into a smooth 60fps .webm video loop — all happening locally without a server. |
Self-Host KromaStudio
Want to run your own instance? It takes less than two minutes. The project is a standard Next.js application.
1. Clone the Repository
git clone https://github.com/Ritesh0888/kroma-studio.git
cd kroma-studio2. Install Dependencies
npm install3. Set Up Environment Variables
cp .env.local.example .env.local
# Edit .env.local to match your URLs if needed4. Run the Development Server
npm run devFrequently Asked Questions
- Why is KromaStudio open source?
- We believe developer tools should be transparent. By open-sourcing the project, you can inspect how we handle your code, verify our privacy claims, and even self-host the studio if you prefer.
- Can I self-host KromaStudio?
- Yes. The project is MIT licensed. You can clone the repository, install dependencies via npm, and run it locally or deploy it to your own infrastructure like Vercel.
- How does the client-side rendering work?
- We use modern browser APIs. Shiki highlights the code in the DOM, html-to-image converts that DOM into a high-res PNG via Canvas, and MediaRecorder captures the Canvas stream to encode .webm videos directly on your device.
- Can I contribute a new theme or language?
- Absolutely. We welcome pull requests! Since we use Shiki, adding a new theme or language is generally straightforward. Please check our CONTRIBUTING.md file in the repo.
- Is there a server processing my code?
- No. Your code is never sent to a backend server. Everything from syntax highlighting to video export happens 100% locally in your browser memory. Read privacy policy →
Explore KromaStudio Tools
Prefer the live app? Open KromaStudio →