Search

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

Contact Us

FAQ

Troubleshoot

Video tutorials

Submit Feedback

Terms of use

Privacy Policy

On this page

Functions

Learn how to create & use functions

Learn how to create & use functions

Learn how to create & use functions

How to create & use functions

On this page

On this page

Functions allow you to write reusable frontend and backend functions and call them anytime during your flow. Functions can be used as lambda, self sustaining executable scripts and can be shared across your internal Symbols app or externally with integrations.

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

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.


Frontend functions

Frontend functions

Frontend functions

Frontend functions can be called within the browser when you want to execute some browser related functionality on your users browser. It can be perfectly used on events such as onClick, onLoad and etc. Most often frontend functions are used to reuse some functionality or wrap API requests in one place.

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

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.


This modal helps you to add a frontend function..

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

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.


Add frontend function

Initiate adding a frontend function to your functions library.

Using functions in components

Using functions in components

Using functions in components

You can invoke functions from your component from context or with require statement.

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

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.


Example code:

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

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.


{
  Input: {
    onInput: (ev, el, s) => {
      const myFunction = require('myFunction'

Copy code

{
  Input: {
    onInput: (ev, el, s) => {
      const myFunction = require('myFunction'

Copy code

{
  Input: {
    onInput: (ev, el, s) => {
      const myFunction = require('myFunction'

Copy code

Using files in media tags

Using files in media tags

Using files in media tags

You can also use file name directly in src of media files.

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

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.


Example code:

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

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.


{
  Img: { src: 'imgFromFiles.jpg'

Copy code

{
  Img: { src: 'imgFromFiles.jpg'

Copy code

{
  Img: { src: 'imgFromFiles.jpg'

Copy code

Removing Files

Removing Files

Removing Files

To remove files you can simply open a file and click on the

bin button at the bottom right corner.

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

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.


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

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

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