Liquidbook
A Storybook-like local preview server for Shopify Liquid templates. Browse and preview your sections and snippets in the browser instantly.
Features
- Auto-discovers
.liquidfiles insections/andsnippets/ - Generates default setting values from
{% schema %}blocks - Supports Shopify-compatible filters and tags (
section,render) - Load external CSS/JS via
.liquid-preview/config.yml - File watching with live reload
Installation
Add to your Gemfile:
gem "liquidbook"
Or install directly:
gem install liquidbook
Usage
Start the preview server
Run from your Shopify theme root:
liquidbook server
Open http://127.0.0.1:4567 in your browser to see a list of sections and snippets with live previews.
Options
| Option | Short | Default | Description |
|---|---|---|---|
--port |
-p |
4567 |
Port number |
--host |
-H |
127.0.0.1 |
Host to bind |
--root |
-r |
. |
Theme root directory |
Render a single template
liquidbook render sections/header.liquid
Outputs the rendered HTML to stdout.
Configuration
Create .liquid-preview/config.yml in your theme root to load external assets into the preview:
head:
- <script src="https://cdn.tailwindcss.com"></script>
- ../src/styles/main.css
- ./src/components.js
port: 4567
host: 127.0.0.1
head entries accept raw HTML tags or file paths. File paths are resolved relative to the theme root.
Development
git clone https://github.com/sena-m09/liquidbook.git
cd liquidbook
bin/setup
Run the preview server against the bundled example theme:
bundle exec liquidbook server -r example
See Release Process for how to publish a new version.