For whom eager to create, design, develop and share with the world.
Grida (Previously known as Bridged 2022 - opensource collaborative realtime ui editor)
an opensource wasm application explicitly designed for service application design/development
- developer first
- plugin sdk and core engine api is mapped 1:1
- right on to production code
This project, Grida is under development with foundation technologies. We are looking forward that Grida will change the industry design/development standard by this piece of OSS Project. For updates, please subscribe our news letter on grida.co or bridged.xyz
- Grida Assistant - A plugin fro figma that allows to import designs to Grida.
- Bridged Console - A Bridged console for content management used for both design & development
- studio is built uppon skia graphics library
- the core component used is followed by reflect design system
- studio's surface is built on react
Read the Grida usage docs here
artboard workspace
scripting built in with js/ts sdk and add-on plugin
Live Collaborative Design Server
GRAPHICS ENGINE
- nothing - nothing but drawing. everything drawable graphics engine.
UI LIBRARY
- reflect-ui
DESIGN DATA STRUCTURE & HANDLING
- reflect-core-ts - reflect core definitions on typescript (nodejs)
- design-sdk - 🎨 A mid wrapper for building consistant figma & sketch & studio plugin, with single api reference
- design-file-converter - ➡️🎨➡️🎨 Convert your design from sketch figma xd Grida - to - sketch figma xd Grida.
- .grida - .bridged configuration specs for Grida App and Code extensions
BACKEND - LIVE COLLABORATION / DATA MANAGEMENT
- design-server - Structure & SDK for building realtime collaboration backend service
- BASE - bridged-app-services - BASE: Bridged App SErvices
WYSIWYG
DESIGN TO CODE
BUILT-IN SERVICES
- accounts.bridged.xyz - (PRIVATE) accounts & payments web / server
- website (source is closed due to security reasons)
- console.bridged.xyz - Bridged console for managing your designs, asset, translations with collaboration.
design of Grida editor on figma
Here are some concepts that do not exist on current design tools, but only at implementation.
- Theme support
- Responsive layout
- Linting
- Grid
- List
- Slots (Not swapping components)
- States
- Git
- Variables
- Data layer
- Logic layer
- Design to code
- Built in base design system (Reflect - a universal design system built for design systems)
- presentation mode
- muggle mode
- developer mode
- graphics mode
- designer mode
- product mode
- prototype mode
- documentation mode
- diagram mode (EDR)
- live collaborative editing
- version control in-the-box
- responsive mode (responsive components)
- visual engine in-the-box
- context engine in-the-box
We'de love to have you change the industry together. Read below documentations before submitting a PR.
git clone --recurse-submodules https://github.com/gridaco/grida.git
cd grida
yarn
yarn desktop # to run as electron desktop app
# .. or ..
yarn web # to run as web app
update pulling - git submodule update --init --recursive