Getting Started

Welcome

Introduction

key benefits

Use cases

Symbols vs other tools

Sign-up & create a project

Configure & install

General workflow

Navigating Symbols

Ways of coding

Configure platform

Security

Tools & topics

Shortcuts

Collaborate & share

Responsive

Editor

Testing tools

Documentation tools

Style guide

Dev version

Publish

Version control

Account settings

Design System

How to configure & use design system

Workflow tips

Colours

Themes

Typography

Unit

Sequence

Font

Media Queries

Animation

Timing

Spacing

Shape

Icon

Responsive

Grids

Timings

Cases

Pages

Library

Platform: Create & use pages

Developer: Create & use pages

Components

Symbols library

Library

Platform: Create & use components

Developer: Create & use components

Component examples: Atoms

Functions

Library

Create & use functions

API

Overview

Element

Properties

Properties library

State

Files

Library

Create & use files

Dependencies

Create & use dependencies

Secrets

Create & use secrets

External

Local by CLI / VS Code

Github

Export project

Domain

Support

FAQ

Troubleshoot

Video tutorials

Submit Feedback

API Overview

Learn how to get setup, create a project, install locally and sync to CLI.

Overview tutorial on design system

DOMQL (Symbols framework)

DOMQL is a library made by Symbols team to simplify app development process with full potential of reusability and customization. The aim to create this framework was to build one of the most reusable components library, and together with a design system library, it creates strong foundation for any frontend development.

DOMQL recursively creates elements from your tree, runs transformations based on reserved properties, applies state and events, and through this virtual tree, renders a DOM tree. The rendering part is separated from the schema part, which makes it easy to use other Javascript DOM render transformers such as Mikado, React or Vue.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

Introduction to Symbols

Overview of how to use Symbols and integrate it into your workflow.

Platform

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

{
  props: {},
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

{
  props: {},
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

{
  props: {},
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

DOMQL

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

const App = {
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

const App = {
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

const App = {
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

React

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

{
  props: {},
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

{
  props: {},
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

{
  props: {},
  header: {
    props: {},
    logo: {
      props: {},
      link: { extend: 'Link'

Copy code

Highlights

HTML, CSS, Javascript unified

Symbols unifies languages to make code management extremely easy. Instead of using different syntax for writing structure, styling and functionality into one syntax.

Simple syntax, no compilation or transpiration required

DOMQL uses Javascript syntax and runs both on Node and Browser without transpirations required. In DOMQL you write your own virtual tree that represents actual website DOM tree after running it in browser.

CSS, HTML attributes and component properties, as one object

With DOMQL and Symbols, you can pass all these given properties as single object. This unified way to interact with component is achieved by passing CSS and HTML attributes alongside with component properties altogether.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

Foundation

DOMQL uses simple javascript syntax and can be run on any Javascript environment. It takes object tree as the first argument and renders website from your original reference. This way you can access your original tree also during lifecycle, log and update it accordingly.

Symbols has more advanced use of DOMQL as it adds on more plugins to make design system and many other features to be integrated in.

On this page we use Symbols version of DOMQL. If you want to use simple bare-bone version of it follow the Github link.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

Scratch framework

Scratch is CSS framework and methodology to build web, mobile and TV applications with one code base.

Scratch transforms a configuration object and outputs the system of design related properties, including variagles. When configuration applied, it applies reset by default and receives a few options:

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

The most common use cases for Symbols are:

Build UIkits / design systems: components, pages style guide, functions etc.
Building web applications: SaaS products, internal tools & integrations, customer portals, etc.
Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

Learn more about each use cases by following the above links.

If you have any questions or need assistance, please don't hesitate to contact our support team at support@symbols.app