This page describes how to configure Theme Development Kit and what it offers for local theme development.

## Configuration

Theme Development Kit can be configured with an optional `finqu.config.json` file in your theme (or project) root. All fields are optional; defaults are used when a value is omitted.

### Project config file

Create `finqu.config.json` in the same directory you run `finqu-theme-dev serve` from (typically the theme root):

```json
{
  "port": 3000
}
```

| Field   | Type   | Default | Description                          |
| ------- | ------ | ------- | ------------------------------------ |
| `port`  | number | `3000`  | Port the development server listens on |

You can override the port per run with the `--port` / `-p` flag:

```bash
finqu-theme-dev serve --port 8080
```

Command-line options take precedence over the config file. The config file is useful to set a default port for your team or to avoid clashes with other tools.

### Credentials and auth

Authentication is handled by the `finqu-theme-dev auth` command. Credentials are stored in `~/.finqu-theme-dev/credentials.json` and are not configured via `finqu.config.json`. You only need to run `auth` once per machine (or when you switch store or channel).

---

## Features

Theme Development Kit is built for fast, realistic local development of Finqu Liquid themes.

### Live preview with real store data

The dev server fetches data from your live Finqu store (products, collections, pages, cart, customer, etc.) and renders your theme with that data. You see the same content and behavior you’ll get in production, without deploying. This avoids mock data and surprises when going live.

### Hot reload

When you save changes to Liquid files, styles, or scripts, the server detects the change and triggers a browser refresh (or injects updates where supported). You don’t need to restart the server or reload the page manually for most edits.

### Full theme support

The same theme structure and features supported in production work locally:

- **Liquid templates** — Layouts, templates, sections, snippets, and blocks.
- **Theme configuration** — `config/settings_schema.json` and `config/settings_data.json` are read and applied.
- **Assets** — SCSS (compiled with Dart Sass), `.liquid` assets, JavaScript, images, fonts, and SVGs. Use the `asset_url` filter and standard theme asset layout as in production.
- **Locales** — Translation files in `locales/` are loaded so you can test multiple languages.

You can develop and debug the full theme surface locally before pushing to Finqu.

### Simple workflow

- **Authenticate once** — `finqu-theme-dev auth` stores credentials for your store and channel.
- **Serve from the theme directory** — `finqu-theme-dev serve` (optionally with `--port` or `--dir`) starts the server. Open the URL in your browser and start editing.

No build step or extra tooling is required beyond the single binary and your theme files. You can run the kit directly (`finqu-theme-dev serve`) or via the CLI: [finqu theme dev](/apis-and-tools/cli/theme#finqu-theme-dev), which uses the kit under the hood. For theme configure, download, and deploy workflows (syncing with the Finqu backend), use the [Command Line Interface (CLI)](/apis-and-tools/cli/overview) (`finqu theme configure`, `finqu theme download`, `finqu theme deploy`).