Introducing Symbols

Source: Dev.to

Overview

Introducing Symbols – an interface framework where HTML, CSS, state, events, DOM, and design systems are composed in a simple, intuitive JSON‑like syntax. It is AI‑friendly and built to unify the design‑developer experience across tools such as Figma, Sketch, React, Vue, etc., while supporting complex design systems and reusability.

Features

• Declarative syntax that is easy for beginners and AI to understand, enabling the creation and reuse of complex screens up to 10× faster.
• Short, concise code that keeps both your codebase and AI resources from burning out.
• A canvas and an advanced, code‑like no‑code editor with collaboration, IntelliSense, error handling, AI assistance, and a designer‑friendly environment.
• Flexible, advanced design system support that lets you ship apps across devices—including TVs, print, and vector‑based tools.

Components

• 3,000+ built‑in components ready for drag‑and‑drop.
• Fully reusable across your entire organization, simplifying cross‑product app development.

Editor

The built‑in editor provides:

• Real‑time collaboration.
• IntelliSense and error handling.
• AI integration for code suggestions.
• A designer‑centric workflow that feels like working with code without the overhead.

Design System

• An integrated Design System editor powered by JavaScript.
• Exportable to your favorite design tools, giving you full control over the framework’s capabilities.

Getting Started

• Join the waitlist:
• Developer preview: