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.
  • github
  • website
  • @nothing.app/react - React SDK - Fully built, all-in-one graphics tools for drawing, editing and sharing

UI LIBRARY

• reflect-ui
  • reflect-editor-ui - Editor UI Framework for React - used by enterprise level applications - such as Bridged, Nothing, Design to code, Code.surf
    • gitHub
  • reflect-ui-react - 🌊 reflect components for react
    • github
  • github
  • website

DESIGN DATA STRUCTURE & HANDLING

• reflect-core-ts - reflect core definitions on typescript (nodejs)
  • github
• design-sdk - 🎨 A mid wrapper for building consistant figma & sketch & studio plugin, with single api reference
  • github
• design-file-converter - ➡️🎨➡️🎨 Convert your design from sketch figma xd Grida - to - sketch figma xd Grida.
  • github
  • website
• .grida - .bridged configuration specs for Grida App and Code extensions
  • github

BACKEND - LIVE COLLABORATION / DATA MANAGEMENT

• design-server - Structure & SDK for building realtime collaboration backend service
  • github
• BASE - bridged-app-services - BASE: Bridged App SErvices
  • github
  • website
  • base-sdk-ts - Bridged App SErvices SDK for nodejs / browser
    • github

WYSIWYG

• boring - 😶 A very boring text editor engine like notion. yet free and open to use
  • github
  • website

DESIGN TO CODE

• design-to-code - Design to code engine. A design ✌️ code standard.
  • github
  • website

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.
  • github
  • website

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.

• contributing.md
• working with submodule packages
• how Grida repo /packages are structured

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

• skia 2d graphics library
  • npm
  • github
  • website