Project authoring

A Shoplifter presentation has two interfaces: the website visitors see, and the dashboard where the owner edits its content. You write the Astro components for the website. You describe the editable content and its editing screen in JSON.

This section uses one Studio website example: an opening headline and image, repeatable service cards, and business details. Follow the same fields across the guides rather than learning each file in isolation.

How the pieces fit together

1. Define a value. definition.json declares hero.title as a text field and supplies its initial value.
2. Place its input. editor.json puts the hero group under Home page → Opening section.
3. Render it. The component selected by shoplifter.json reads content.hero.title.
4. Try an edit. Local fixtures.json lets you test another title without changing a live store.
5. Let the owner edit. In the dashboard, the owner changes the same field; the SDK supplies the saved value to the component.

Changing where an input appears is different from changing where its value is stored. An editor section does not create a new content object.

Read each project file

File	The question it answers	Detailed guide
shoplifter.json	Which components make up this presentation?	Components and project wiring
definition.json	What may the owner edit, and what do the values look like?	Fields, types, defaults and versions
editor.json	Where does each input appear in the dashboard?	Groups, sections and collection summaries
data.json	Which platform data does the page need?	Named data requests and their results
assets.json	Which images are bundled, and which fields do they initialize?	Images and asset bindings
design.json	Which supported visual defaults should the presentation use?	Theme and design settings
migrations.json	How will existing owner content survive a schema change?	Versioned content migrations
Source, fixtures and generated files	Which files should I edit, regenerate or leave alone?	Development files and component props

Each guide explains the file’s purpose, shows an example, describes its keys, and connects it to the next file.

Design the owner’s editing screen

Start with Build an editor with groups and sections. Then use field types and controls and repeatable lists and galleries to make the editing experience predictable.

This is the owner-facing content editor. Visitor inquiry forms use the separate lead-form API.

What you own

Your project owns homepage, header, footer and their styling. The SDK owns document metadata, language/direction, managed editorial/contact routes and the support shell. Keep the generated integration; additional routes and replacement shared templates are unsupported.

Edit the source JSON directly or use the validated CLI authoring commands. Then regenerate types, validate, and inspect the rendered result. Continue to fixtures and validation before upload.