Examples

The claim is that what you draw is what compiles. Here is the demonstration.

You are looking at one

This website — the marketing pages, and the documentation you are reading now — was designed in Misaki Studio and runs on the React it exported.

Not a demo built to be shown. The product's own shopfront, maintained the same way you would maintain yours:

• Generated files in the site's source — 187.

• Lines of generated code — ~45,000.

• Files carrying shipped timeline animation — 25.

Every one of those files opens with the same line:

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

Nobody hand-edits them. A design change is re-exported and the diff is reviewed like any other code change.

What a component actually looks like

This is atoms/Mark — a small real component from this site, exported as-is, with only the render body elided for length:

// This file is generated by Misaki Studio. Do not edit.
"use client";
import * as react from "react";
import * as msi from "misaki-studio-internal";
import styles from "./mark.module.scss";

export type Props = { title: string };

export const DefaultProps: Props = { title: "Title" };

export const Component = ({
  className = "",
  style,
  divProps,
  properties = DefaultProps,
}: {
  className?: string;
  style?: React.CSSProperties;
  divProps?: msi.DivProps;
  properties?: Props;
}) => {
  ...
};

Three details are what make this usable rather than merely generated:

• It is typed. Props is a real exported type. A caller passing the wrong thing fails at compile time.

• It accepts a className and a style. You can drop it into your own layout and adjust it from outside without touching the file.

• The design system came through as variables, not as baked values. Its stylesheet references var(--svgs-types-icons-mark, none) — so re-theming the project re-themes this component.

Variants and slots survive the trip

Here is the type surface of atoms/Button from the same site:

export const Variants = {
  default: undefined,
  sizeSmall: "Enn689k",
  typeSecondary: "E3zlmqe",
  plain: "Enfe2vo",
  typeGhost: "E3q0sbl",
};
export type Children = { left?: React.ReactNode; right?: React.ReactNode };

and the prop that consumes them:

variant?: (keyof typeof Variants)[];

That is an array, key-checked against the variants the design declares — so variant={["typeGhost", "sizeSmall"]} composes both, and a typo is a compile error rather than a silently unstyled button. The named children slots the designer drew are left and right, and they arrive as a typed object.

None of that was written by hand, and none of it is a comment describing intent. It is the design, compiled.

Animation that ships

Timelines are not a preview feature. Twenty-five of this site's generated files carry timeline data, which the runtime plays in the browser — the same timeline the designer scrubbed, exported as data rather than re-implemented by a developer afterwards.

Start from something real

Rather than reading about it, open a project and take it apart. Published templates open in the playground, so you can inspect a finished design's element tree, its variants and its logic, and export it to see what comes out.

Where next

• Why Misaki Studio — where it fits against other tools.

• How export works — the model behind the output above.

• Export your code — do it yourself and read the result.