A project is one product: its components, pages, design system, content and settings, together in one place. You create a project first, then work inside it — there is no loose-file mode.
Most design tools start with files and pages, and that works right up until it doesn't. Once a product has a component library, a design system, mockups, prototypes and real content, a flat list of files stops describing anything.
Misaki Studio fixes the shape up front. A project has typed sections, each holding one kind of thing, so where a file lives tells you what it is. You never have to invent a folder convention, and nobody has to learn yours.
The FILES panel splits every project into these:
Your reusable building blocks, in atomic-design layers — atoms, molecules, organisms, templates. Each file exports as one React component. This is where most of the work happens. See Components.
Whole screens, composed from components. Pages export as routes rather than reusable components, so this is what becomes the site or app a visitor sees.
The shared vocabulary — colors, fonts, images, sounds, videos, spacing, radius and themes. Defined once, referenced everywhere, exported as CSS variables so a token change lands everywhere at once. See Design system.
Long-form rich content: guides, blog posts, help pages. Documents are written as rich text rather than drawn on a canvas, and can be attached to a page to appear in its navigation. These docs are themselves documents in a Misaki Studio project.
Exploration space. Mockups are for thinking — sketches, alternatives, references — and deliberately do not export. Keep unfinished ideas here and the generated code stays clean.
Image assets — uploaded once, referenced from any design, copied into your assets on export.
Endpoint definitions: request shape, response shape, method. Once an API is defined, its data can be bound into designs — a list that repeats over real results rather than placeholder rows.
Content, modelled: fields defined once, rows edited in a grid, mounted into a design the same way an API response is. For the things a person edits and the design displays.
Tables with typed columns, views with access rules, and the built-in Users and Roles tables that sign-up and sign-in resolve against. This is where a login flow and the data behind it live. See File sections for the detail.
Shared state that outlives a single component: schemas and the values held against them. Where APIs bring data in from elsewhere, storage is state your product owns. It is shared across components, and each schema chooses whether its value lives in memory, survives the tab, or survives a browser restart.
Project-level configuration, including Export targets — the local folders or Git repositories your code is written to. See Export your code.
Inside a section, create files and folders freely — right-click to add, rename or delete. Names must be unique within their folder, and the project convention is PascalCase, each word capitalized: FormField, UserAccountSettings.
Double-click a file to open it. Several files can be open at once, as tabs.
Components — the layer you will spend most time in.
File sections — each section in detail.