Opensource Design Tool for the world.

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 application is under development and will be available on stable channel on early 2022

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

Engine & Foundation

• studio is built uppon skia graphics library
• the core component used is followed by reflect design system
• studio's surface is built on react

Docs

Read the Grida usage docs here

Workspace

artboard workspace

Scriptable

scripting built in with js/ts sdk and add-on plugin

Backend

Live Collaborative Design Server

Structure - Packages & Modules

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

The design

design of Grida editor on figma

Bridging the gap between design and development

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)

Key features / modes

• 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

Contributing

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

Building

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

References

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