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 Element

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

Element

DOMQL element is a simple object that you create and pass to create function. DOMQL create transforms object without changing your reference in a way that it has all nessessary rendering properties, and renders it to a DOM.

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.

Anatomy

DOMQL element is originally an object component that you define. When you create element, DOMQL takes several properties from object to define its rendering logic, such as applying tag, changing text and so on. This is anatomy of DOMQL object, where any additional property will be treated as child element and thats how you create nesting.

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.

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.

{
  // apply element tag
  tag: 'section',
    
  // "extend" merges defined elements with current one
  extend: 'Button', // ['Link', 'Button'], or { tag: 'button' }

  // passing properties to element
  props: { isActive: true },

  // create state for component and its children
  state: {},

  // scope
  scope: { /* sharing this object across the element */ },

  // attributes
  attr: { id: 'unique-id' },

  // styling
  class: {
    isDisabled: (element, state) => state.value !== element.key && ({ pointerEvents: 'none'

Copy code

{
  // apply element tag
  tag: 'section',
    
  // "extend" merges defined elements with current one
  extend: 'Button', // ['Link', 'Button'], or { tag: 'button' }

  // passing properties to element
  props: { isActive: true },

  // create state for component and its children
  state: {},

  // scope
  scope: { /* sharing this object across the element */ },

  // attributes
  attr: { id: 'unique-id' },

  // styling
  class: {
    isDisabled: (element, state) => state.value !== element.key && ({ pointerEvents: 'none'

Copy code

{
  // apply element tag
  tag: 'section',
    
  // "extend" merges defined elements with current one
  extend: 'Button', // ['Link', 'Button'], or { tag: 'button' }

  // passing properties to element
  props: { isActive: true },

  // create state for component and its children
  state: {},

  // scope
  scope: { /* sharing this object across the element */ },

  // attributes
  attr: { id: 'unique-id' },

  // styling
  class: {
    isDisabled: (element, state) => state.value !== element.key && ({ pointerEvents: 'none'

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.

{
  Link: {
    tag: 'a'
  },
  
  ListItem: {
    extend: 'Link',
    attr: {
      href: '#'
    }
  },
  
  Logo: {
    extend: 'Link',
    props: {
      href: '/',
      text: 'MyCompany'
    }
  },
  
  Menu: {
    childExtend: 'ListItem',
    home: 'Home',
    text: 'About'
  },
  
  Header: {
    extend: 'Flex',
    props: { align: 'center space-between'

Copy code

{
  Link: {
    tag: 'a'
  },
  
  ListItem: {
    extend: 'Link',
    attr: {
      href: '#'
    }
  },
  
  Logo: {
    extend: 'Link',
    props: {
      href: '/',
      text: 'MyCompany'
    }
  },
  
  Menu: {
    childExtend: 'ListItem',
    home: 'Home',
    text: 'About'
  },
  
  Header: {
    extend: 'Flex',
    props: { align: 'center space-between'

Copy code

{
  Link: {
    tag: 'a'
  },
  
  ListItem: {
    extend: 'Link',
    attr: {
      href: '#'
    }
  },
  
  Logo: {
    extend: 'Link',
    props: {
      href: '/',
      text: 'MyCompany'
    }
  },
  
  Menu: {
    childExtend: 'ListItem',
    home: 'Home',
    text: 'About'
  },
  
  Header: {
    extend: 'Flex',
    props: { align: 'center space-between'

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.

{
  // apply element tag
  tag: 'section',
    
  // "extend" merges defined elements with current one
  extend: 'Button', // ['Link', 'Button'], or { tag: 'button' }

  // passing properties to element
  props: { isActive: true },

  // create state for component and its children
  state: {},

  // scope
  scope: { /* sharing this object across the element */ },

  // attributes
  attr: { id: 'unique-id' },

  // styling
  class: {
    isDisabled: (element, state) => state.value !== element.key && ({ pointerEvents: 'none'

Copy code

{
  // apply element tag
  tag: 'section',
    
  // "extend" merges defined elements with current one
  extend: 'Button', // ['Link', 'Button'], or { tag: 'button' }

  // passing properties to element
  props: { isActive: true },

  // create state for component and its children
  state: {},

  // scope
  scope: { /* sharing this object across the element */ },

  // attributes
  attr: { id: 'unique-id' },

  // styling
  class: {
    isDisabled: (element, state) => state.value !== element.key && ({ pointerEvents: 'none'

Copy code

{
  // apply element tag
  tag: 'section',
    
  // "extend" merges defined elements with current one
  extend: 'Button', // ['Link', 'Button'], or { tag: 'button' }

  // passing properties to element
  props: { isActive: true },

  // create state for component and its children
  state: {},

  // scope
  scope: { /* sharing this object across the element */ },

  // attributes
  attr: { id: 'unique-id' },

  // styling
  class: {
    isDisabled: (element, state) => state.value !== element.key && ({ pointerEvents: 'none'

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