# Mirin

> Mirin builds custom business websites and gives customers a simple visual editing workflow after launch.

Mirin combines done-for-you website design with a managed page builder. Sites are built from reusable components, pre-rendered, and served from a global edge network for fast load times.

## Core Documentation

- [Overview](https://mirin.com/docs/overview): What is Mirin and how it works
- [Quick Start](https://mirin.com/docs/quickstart): Build your first component in 5 minutes
- [Desktop App](https://mirin.com/docs/cli): Local website and theme pack workflow
- [Building Components](https://mirin.com/docs/components): Props, schemas, and best practices for React, Vue, and Svelte
- [Theme Packs](https://mirin.com/docs/theme-packs): Organize and distribute component collections
- [Page Builder](https://mirin.com/docs/page-builder): Using the visual editor to create pages
- [Publishing](https://mirin.com/docs/publishing): Publishing pages and hosting configuration
- [Analytics](https://mirin.com/docs/analytics): Click tracking and visitor analytics
- [Lead Capture](https://mirin.com/docs/lead-capture): Form submissions and lead management

## Key Concepts

Components: Reusable UI blocks built in React, Vue, or Svelte with a schema that defines editable props.

Theme Packs: Bundles of related components that can be installed together, similar to WordPress themes but with modern framework support.

Pages: Visual compositions of components built in the drag-and-drop editor.

Sites: Published websites with custom domains, SSL, and global CDN distribution.

## Desktop Workflow

- Use the Mirin desktop app to create or import theme packs.
- Add components under `components/` with an `index` file and `schema.json`.
- Use Rebuild in the desktop app to validate and compile theme packs.
- Use Sync Up to push local changes to the dashboard and cloud.

## Component Schema Types

- `string` - Single line text input
- `text` - Multi-line textarea
- `number` - Numeric value with optional min/max/step
- `boolean` - True/false toggle switch
- `color` - Hex color picker
- `image` - Image picker with upload
- `array` - Repeatable list of items
- `select` - Dropdown with options

## Framework Support

Mirin supports three modern frontend frameworks:
- React (JSX/TSX) with full hooks support
- Vue 3 (Single File Components)
- Svelte (native .svelte components)

Framework is auto-detected from package.json dependencies.

## Optional

- [Pricing](https://mirin.com/pricing): Plans and pricing information
- [Contact](https://mirin.com/contact): Get in touch with the team
- [Blog](https://mirin.com/blog): Product updates and tutorials
- [Privacy Policy](https://mirin.com/legal/privacy): Privacy information
- [Terms of Service](https://mirin.com/legal/terms): Terms and conditions