> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joinmarkt.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes overview

> How a Join Markt theme is put together, edited in the builder, and published to your storefront.

A Join Markt theme is a folder of plain files. JSON files hold what the seller changes in the visual editor (pages, header, footer, theme settings). Code files hold the design of each section. The builder edits these files, the preview builds them, and **Publish** ships the same files to your live store.

![Dark visual builder with sections, preview, and settings](https://mintcdn.com/sami-9e34e6f7/Cl9FI_2zhgekDVIy/images/builder/visual-dark.png?fit=max\&auto=format\&n=Cl9FI_2zhgekDVIy\&q=85\&s=c064dec38c62d2d0adb0dda79b2e6840)

Visual builder

![Dark code builder with the file tree, editor, and preview](https://mintcdn.com/sami-9e34e6f7/Cl9FI_2zhgekDVIy/images/builder/code-dark.png?fit=max\&auto=format\&n=Cl9FI_2zhgekDVIy\&q=85\&s=72276c07f38bd4aa2cab3b24b5295ae2)

Code builder

## How it fits together

**1. Pick a theme**

Start from a catalog theme in the builder. The theme is copied into your store, so every file is yours to change.

**2. Edit**

Use **Visual** to add, reorder and configure sections, or **Code** to change any file. Both editors write the same files.

**3. Preview**

The preview is a real build of your theme on your store data, not a screenshot. It updates as you edit.

**4. Publish**

Publish builds the theme and puts it live on your subdomain and custom domain.

## One pipeline, three ways to write a section

`theme.json` sets `runtime` to `react`, `liquid`, or `vite`. That only changes how a section's design file is written. Settings, blocks, the visual editor, preview and publish work the same for all three.

| Runtime | Section file | Good for |
| - | - | - |
| `react` (default) | `index.tsx` | Interactive sections, shared components |
| `liquid` | `index.liquid` | Shopify-style templates, quick markup |
| `vite` | `index.ts` exporting `mount` | Framework-free DOM code, canvas, animation |

## In this section

The catalog lists every theme the hub can install.

> [card] [Theme catalog](https://docs.joinmarkt.com/themes/catalog.md)
>
> Name, runtime, tone, and price for every theme you can start from.

> [card] [Create a custom theme](https://docs.joinmarkt.com/themes/custom-theme.md)
>
> Copy a catalog theme or import a ZIP, then edit and publish.

> [card] [Theme structure](https://docs.joinmarkt.com/themes/structure.md)
>
> The files in a theme and what each one does.

> [card] [Runtimes](https://docs.joinmarkt.com/themes/runtimes.md)
>
> The same section written in React, Liquid and Vite.

> [card] [Section schema](https://docs.joinmarkt.com/themes/section-schema.md)
>
> Every setting type, presets, limits and templates.

> [card] [Blocks and nesting](https://docs.joinmarkt.com/themes/blocks.md)
>
> Repeatable items and one-level nested blocks.

> [card] [Pages](https://docs.joinmarkt.com/themes/pages.md)
>
> Built-in templates and custom pages.

> [card] [Using the builder](https://docs.joinmarkt.com/themes/builder.md)
>
> Visual and Code editing.

> [card] [Publish and updates](https://docs.joinmarkt.com/themes/publish-and-updates.md)
>
> Publishing, warnings and theme updates.

> [card] [Troubleshooting](https://docs.joinmarkt.com/themes/troubleshooting.md)
>
> Changes not showing, JSON errors, platform files.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.