Tonic

Tonic is an open-source digital collections framework that turns a YAML, JSON, or CSV file into a customizable, filterable static website. Built on Middleman, Ralix, and Tailwind CSS, it is made by Subgin and released under the MIT license.

What is Tonic?

Tonic is a static site generator for structured collections of items—products, artworks, books, and similar data. It takes a collection file in YAML, JSON, or CSV, parses it, and produces a fully responsive website with filtering, sorting, and optional detail, category, and statistics pages. The project runs on Ruby and Yarn, uses Middleman as the underlying static site engine, Ralix for JavaScript interactions, and Tailwind CSS for styling.

Key Features

• Multiple data formats — Define a collection in data/collection.yaml, data/collection.json, or data/collection.csv; numeric fields are auto-detected and array fields like tags can be comma-separated in CSV cells.
• Magic attributes — Names such as name, description, category, tags, and images automatically drive item rendering and related filters; any attribute ending in _at is parsed as a date.
• Automatic media embeds — URLs to YouTube, Vimeo, and other platforms become video embeds, and audio files get a built-in player.
• Generated pages — Detail pages for every item, category pages at URLs like /category/design, and a stats page at /stats are all generated by default and can be disabled via config.yaml.
• Filtering and sorting — Tonic infers filter types (text, select, radio buttons, numeric range, date range, tags, boolean) from the data, with overrides per attribute; sorting supports a default order and can exclude attributes.
• Sharing options — Configurable sharing buttons for Facebook, X, Reddit, Linkedin, Pinterest, Whatsapp, Telegram, and Email, or a custom subset.
• Customization — Edit ERB templates under source/templates/collection/ to change the item card and detail page markup, or add extra pages via Middleman-compatible templates.

Who is it for?

Artists and makers can showcase a portfolio of works with filters by medium or year, while librarians and archivists can publish digital collections of documents, photographs, or artifacts with searchable metadata. Product teams can present a catalog of items with price and download counts. Anyone who maintains a structured dataset and wants a clean website without building a frontend from scratch fits Tonic's workflow.

What can you do with Tonic?

• Create an online storefront catalog — Define products in collection.yaml with price, downloads, and published_at, then generate a site with sorting by price or date.
• Publish a research or archive collection — Use nested attributes like address.street or geo.lat to expose structured metadata, plus the stats page to visualize field distributions.
• Build a video or audio gallery — Drop in YouTube/Vimeo URLs and audio file links so items render with embedded players automatically.
• Link out to existing detail pages — Set detail_page_link on any item to jump to an external page instead of the generated detail page.

How does Tonic work?

Install with bin/setup (requires Ruby and Yarn), then edit data/collection.yaml and data/config.yaml. Run bin/dev for a local development server, or bin/build to compile a static site into the build/ folder. The tool analyzes the first item in the collection to infer filter types, so the output is customized to the shape of your data.

FAQ

Does Tonic require a design or coding background?

No. Adding items means editing a YAML/JSON/CSV file, and most site options live in data/config.yaml. For deeper changes, you can edit ERB templates, but that is optional.

Can Tonic pull data from a remote URL?

Yes. Set remote_collection to a URL in config.yaml and the framework will fetch the collection from that remote resource.

Is Tonic free to use?

Tonic is open source under the MIT license, so it is free to use, modify, and distribute. No pricing tiers are offered.

What output does Tonic produce?

It generates a static website built with Middleman, with HTML pages and assets placed in the build/ directory, ready to host on any static host.

What happens if I want no detail pages?

Set detail_pages: false in config.yaml; you can still link items to external pages using detail_page_link.