Linrstudio / macaron

Visual component editor for Web development

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.

• 🖊️ Easy-to-use visual editor
• 🧑‍💻 Runs in Visual Studio Code
• 🌐 Framework-agnostic
• 📥 Import Web Components
• 🗒️ Clean File Format
• 🎨 Copy-paste from Figma (WIP)

Demo

• See the Website.

Usage

• See the guide.

Development

Setup

# Clone
git clone --recursive [e-mail]: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

Publish npm packages

lerna publish

Analytics

Macaron uses Plausible to collect anonymous analytics data.

Dashboards

• Website
• VS Code custom editor