Macaron

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript.

Its goal is to allow you to create and continuously maintain components visually, and make Web frontend development easier and more fun.

• :pen: Easy-to-use visual editor
• :technologist: Runs in Visual Studio Code
• :globe_with_meridians: Framework-agnostic
• :inbox_tray: Import Web Components
• :spiral_notepad: Clean File Format
• :art: Copy-paste from Figma (WIP)

Demo

• See the Website.

Usage

• See the guide.

Roadmap

• Better component usability
  • [ ] Better access to inner elements (#125)
  • [ ] Per-element pseudoclasses / pseudoelements (#124)
  • [ ] Improve server side rendering
    • Macaron currently compatible with SSR by Next.js or other tools but component contents are renderered in client side

Development

Setup

# Clone
git clone --recursive [email protected]:macaron-elements/macaron.git

cd macaron

# Install dependencies
yarn

# Build
yarn build

Project Structure

• /packages/editor - The Macaron Editor
• /packages/paintkit - The submodule for the paintkit library
• /packages/vscode - The VS Code extension that provides Macaron as a custom editor
• /packages/figma - The Figma plugin for Macaron
• /packages/compiler - The compiler that converts Macaron files to Web Components
• /packages/loader-vite - The Vite plugin to import Macaron files directly from JS/HTML
• /packages/docs - The Website and documentation

This project uses Yarn Workspaces.

Start devservers

yarn dev

• http://localhost:3000 : Demo editor
• http://localhost:4000 : Docs
• http://localhost:7007 : Storybook for paintkit
• http://localhost:1234 : Test Project

Launch VS Code extension

• Make sure yarn dev is running
• Open the root directory in VS Code
• Press F5 (or menu Run → Start Debugging)

Test

yarn test

# Update snapshots
yarn test -u

Release a new version

Version bump

GH_TOKEN={GitHub PAT with repo: scope} yarn bump-version # this runs `lerna version --conventional-commits --create-release github`

Publish NPM packages

yarn build
cd packages/compiler
yarn publish
cd ../..
cd packages/loader-vite
yarn publish

Publish the VS Code extension

Log in to vsce before publish

yarn build
cd packages/vscode
yarn vsce publish

Analytics

Macaron uses Plausible to collect anonymous analytics data.

Dashboards

• Website
• VS Code custom editor