Project Structure
Meno Studio connects visual editing with real files.
Two-Way Sync
When you make an edit in the Studio, it automatically changes your files. And if you change a file and save it, the change shows up in the Studio too. The editor and the file system stay in sync both ways.
Pages
In the pages folder you have a JSON file for each page, and a templates subfolder for CMS templates, which generate pages from your content collections. The filename determines the URL path:
File | URL |
|---|---|
|
|
|
|
|
|
Components
The components folder is divided into subfolders for different categories like UI, Section, Layout, and Form. You can add as many subfolders as you want and organize components however you need. If you go to Studio and open the Components panel, you'll see all those folders and components right there, ready to use in your pages.
CMS
In the CMS folder, each collection has its own subfolder. Open one like Posts and you'll see the same items that show up in the CMS panel in Studio.
Fonts and Colors
The fonts folder holds all your font files, which are also available in the Style Guide. All the colors from the Style Guide are saved in the colors.json file.
Project Configuration
The project.config.json file corresponds to everything you find in Project Settings: locales, breakpoints, responsive scales, enums, and the base component. All of those settings live in this one file.
That's it. Pages, components, CMS, and a couple of config files. Everything you do in the Studio maps back to these files, which means you can version control your project with Git, collaborate through pull requests, or edit the files directly whenever you prefer.