Liquidbook

A Storybook-like local preview server for Shopify Liquid templates. Browse and preview your sections and snippets in the browser instantly.

• Auto-discovers .liquid files in sections/ and snippets/
• 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

Add to your Gemfile:

gem "liquidbook"

Or install directly:

gem install liquidbook

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.

liquidbook render sections/header.liquid

Outputs the rendered HTML to stdout.

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.

git clone https://github.com/sena-m09/liquidbook.git
cd liquidbook
bin/setup

See Release Process for how to publish a new version.

MIT License