Export your code

You have a component on the canvas. This page turns it into React you can drop into an app — the step where the design becomes files on disk.

New here? Start with Your first component.

1. Choose where the code goes

Export writes to targets you configure once per project, in the project's SETTINGS file under Export. Two kinds:

• Local folder — a path on this machine. Best while developing: export, and the files appear in your app's source tree straight away. This target needs the desktop app — it writes to your filesystem, so it is hidden in the browser.

• Git — a repository and branch. Works everywhere, including the browser, and is the way to hand work to a team or CI.

A project can have several targets; exporting writes to all local-folder targets at once.

2. Export

Press Export. Every component, page and design-system file in the project is regenerated into each local-folder target; a Git target exports with its own button, writing the same output to the repository and branch you configured.

Export is a whole-project action, not a per-file one — so the output is always internally consistent: a component and the pages using it never disagree.

3. What you get

Each design file becomes two files, named after it in lower case:

button.tsx            the React component
button.module.scss    its styles, scoped as a CSS module

Both open with:

// This file is generated by Misaki Studio. Do not edit.

That line is the contract. These files are outputs — the next export overwrites them. Edit the design, not the code.

Alongside them you get a design-system/ folder holding your colors, fonts, spacing, radius and themes as shared CSS variables and helpers, plus the SVGs your designs reference.

4. Use it in your app

The generated code depends on a small runtime package, plus the tooling it is built against. misaki-studio-internal provides the pieces a design can't express as plain markup — the timeline player, mesh gradients and shaders, responsive containers, storage and state helpers — and without it the imports won't resolve. Install everything once:

npm install misaki-studio-internal next sass styled-components

The output targets Next.js (pages router) — it imports next/router and ships .module.scss files. On an app-router project you will need to adapt the routing imports yourself.

Then import the component and use it like any other:

import * as Button from "./components/atoms/button";

export const Toolbar = () => (
  <Button.Component
    properties={{ label: "Save" }}
    divProps={{ onClick: () => save() }}
  />
);

The shape has three parts:

• properties carries the props you declared in the design. They are typed — the export generates a Props type from your data structure.

• divProps passes anything through to the root element: event handlers, data-* attributes, a ref.

• variant selects style variants when the component declares them, and composes: variant={["outline", "lg"]}.

Pages export slightly differently — as a default export, ready to be a route.

5. Re-exporting

Change the design, press Export again, and the files are rewritten in place. Because generated files are overwritten wholesale:

• Never hand-edit them. Your change disappears on the next export.

• Do commit them. They are the code your app builds against, and reviewing their diff is a good way to see what a design change actually did.

• Wrap, don't modify. To add behavior the design can't express, import the generated component into a file of your own and extend it there.

Tip: treat an export diff like any other code review. If a small design tweak produces a large diff, that is worth understanding before merging.

With an agent: exporting is not a manual-only step. An agent connected over MCP can add or change export targets, run the real Export, and read the generated code back to check what it produced. See MCP tools.

No app to export into yet? Two starter repositories exist — one that runs your export as a website, one that publishes it as an npm package. See Boilerplates.

Next: Where to go next — the two routes onward, depending on whether you are designing or integrating.