@syncify/cli NPM

Syncify is a specialized tool designed for Shopify theme development. It offers an array of features that significantly enhance productivity, integration and workflow on the Shopify platform. Created to address the mediocrity of OSS (theme dev) offerings from the Shopify team, Syncify delivers a sophisticated, high-performance, and customizable toolkit that streamlines workflows and integrates with modern tooling.

Why Use Syncify?

If you are seeking a tool that has considered requirement factors across the modern Shopify Theme Development ecosystem, and would like a solution that produces performance-focused optimizations at the development process level with features designed for the complexities of modern e-commerce, see the below core capabilities offerred by Syncify:

✓ Custom input → output directory structures for tailored project organization. ✓ Compiling TypeScript, JavaScript, TSX, and JSX to support modern web development practices ✓ Tailwind, PostCSS, and SASS stylesheet support for advanced CSS management ✓ Terse minification of Markup and Liquid to optimize performance ✓ Static pages with Markdown → Markup transformation for content creation flexibility ✓ Metafield, Redirects, and Navigation synchronization for seamless data management ✓ Version Controlled theme distribution ensuring consistency and traceability ✓ Shared Schemas as a superset implementation for enhanced data modeling ✓ Frontmatter controlled liquid level configuration to fine-tune template behavior ✓ SVG transform and sprite generation processing for efficient icon and graphic handling ✓ Multistore and theme parallel synchronization to manage multiple storefronts ✓ Websocket HOT Reloads with CFH control and morphing for real-time development feedback ✓ Git-based automations with CI baked integrations for streamlined development workflows

Examples / Themes

The Syncify Straps github organization provides a collection of usage examples and starting point themes using Syncify. You can use the command line to generate new projects with the available straps.

Editor Intergration

For an integrated development experience in your text editor, please consider using the VSCode Liquid extension which has built-in support for Syncify. VSCode Liquid is an independent alternative to the Shopify backed extension.

Getting Help?

Join the Shopify Developers Discord and ask your questions in the # syncify channel under the projects tab. Connect with other developers, maintainers, and contributors already using Syncify in their projects or within their agency.

Installation

You can install Syncify as a development dependency or globally. There are a couple of different versions available, all of which can be consumed via the NPM Registry. Please consider using pnpm as your package manager for a faster and better experience with Syncify and NodeJS development. For all releases and available versions refer to syncify.sh/releases page.

Install Syncify globally to make the CLI binary available system-wide so you can use commands anywhere on your computer. The @syncify/config package can be leveraged on a per-project basis along side global installations for configuration file TypeScript support.

Stable Release

The most stable and latest version of Syncify is available for consumption via the NPM Registry.

pnpm add @syncify/cli --global

Nightly Release

The nightly releases of Syncify can be installed using the @next version tag via NPM, code is on next branch.

pnpm add @syncify/cli@next --global

Unstable Release

The unstable releases of Syncify can be installed using the @unstable version tag via NPM, code is on unstable branch.

pnpm add @syncify/cli@unstable --global

Packages

This repository hosts a collection of sub-packages available for download through the NPM Registry. Each package includes a detailed readme that provides comprehensive insights into its specific use cases, functionality, and implementation details. All packages can be used standalone, independently of the Syncify CLI.

Contributing

Contributions are welcome! This project is a monorepo managed with pnpm and changesets. Dependencies follow the workspace protocol, ensuring a symlinked structure with pnpm managing NPM registry versions. The packages directory contains modules consumed by the core syncify module. To contribute bug fixes or enhancements, you'll need to fork or clone the entire project. Development is designed for use with VS Code, and maintaining consistency within this setup is encouraged.

The .vscode workspace settings include all the necessary configurations for the project, ensuring a seamless development environment. It also provides tailored extension recommendations to enhance productivity and maintain consistency.

While not required, if you wish to recreate the environment in which this project is developed then you can install and leverage the above additional third-party tooling.

Ensure pnpm is installed globally npm i pnpm -g
Leverage pnpm env if you need to align node versions.
Clone this repository git clone https://github.com/panoply/syncify.git
Run pnpm i in the root directory
Run pnpm build which will bundle all packages

Development Guide

All packages are compiled using ESBuild through tsup. You can either cd into any package directory to run commands, or from the workspace root, you can execute pnpm dev. The pnpm dev command initializes development in watch mode and concurrently compiles both the core syncify package and the docs. Keep in mind that Syncify is distributed as CommonJS (CJS) but is compatible with ES modules (ESM) as it exports as a CLI Binary.

Per Package

pnpm dev                    # Watch and build modes
pnpm build                  # Build mode only (production)

!NOTE Almost all packages will expose the above commands via package.json script, with some exceptions depending on module. The pnpm build command however is available within all modules.

Recursive (Workspace Root)

pnpm build                  #  Build production bundles for all modules and packages

Targeting (Workspace Root)

pnpm @docs     <cmd>        # Targets the documentation SSG directory
pnpm @acquire  <cmd>        # Targets the @syncify/acquire acquire config bundle
pnpm @ansi     <cmd>        # Targets the @syncify/ansi CLI enhancement package
pnpm @config   <cmd>        # Targets the @syncify/config configuration package
pnpm @glue     <cmd>        # Targets the @syncify/glue Glue utility package
pnpm @codframe <cmd>        # Targets the @syncify/codeframe Codeframe CLI package
pnpm @codegen  <cmd>        # Targets the @syncify/codegen Codegen generator helper
pnpm @hot      <cmd>        # Targets the @syncify/hot HOT Reloading client
pnpm @json     <cmd>        # Targets the @syncify/json JSON parser and differ
pnpm @kill     <cmd>        # Targets the @syncify/kill process kill package
pnpm @turndown <cmd>        # Targets the @syncify/turndown reversed markdown parser
pnpm @timer    <cmd>        # Targets the @syncify/timer timing utility
pnpm @tests    <cmd>        # Targets the @syncify/tests internal test utility
pnpm @update   <cmd>        # Targets the @syncify/update version check utility
pnpm @uws      <cmd>        # Targets the @syncify/uws uWebsockets repackage
pnpm @cli      <cmd>        # Targets the @syncify/cli package (main package)

GraphQL Introspection and Typings

Syncify does not use Shopify OSS offerrings, you will find zero @shopify/* projects in the codebase. Interfacing with the Shopify API is handled with a custom client. The client is extensively typed and the TypeScript definitions are generated using codegen. The repository comes with definitions and introspection included so there is no need to pull or regenerate.

Author / Licensing

Syncify was created and is maintained by Νικολας Σαββιδης. Shopify has no affiliation with this project and does not fund Syncify; it is a completely independent solution. Choosing to leverage Syncify helps keep these independent projects alive and sends a clear message to Shopify that the community drives innovation.

Acknowledgements

Special thanks to the talented developers who have contributed to Syncify. This project has been in development for several years, and without these individuals, it wouldn't have progressed this far.

Donate / Sponsor

If you are an individual looking to express gratitude financially, I would much prefer you donate to your local animal shelter and share the story with me on X. If you are a business, agency, or representing an enterprise using Syncify and interested in discussing partnerships, opportunities, or custom solutions, you can reach me via email or message me on X.