Search
Getting Started
Tools & topics
Design System
Components
Functions
Dependencies
Secrets
On this page
Introduction
Explore getting introducted to Symbols.
Explore getting introducted to Symbols.
Explore getting introducted to Symbols.
On this page
On this page
Overview of how to use Symbols
What is Symbols?
What is Symbols?
What is Symbols?
Symbols is a platform that allows you to develop advanced reusable UIkits through a design system for web projects, with real-time collaboration between developers and non-developers. This includes working with design system stakeholders such as designers and marketers, whilst seeing their changes made instantly.
Whether you are looking to use Symbols to create design systems / Uikits to be used alongside your exiting tech stack & website, or to build websites inside Symbols itself, we have you covered.
Symbols was built from the ground up to be tech agonistic, and therefore to not force you to leave your existing tech stack, but to enhance it by integrating with it.
Symbols is a platform that allows you to develop advanced reusable UIkits through a design system for web projects, with real-time collaboration between developers and non-developers. This includes working with design system stakeholders such as designers and marketers, whilst seeing their changes made instantly.
Whether you are looking to use Symbols to create design systems / Uikits to be used alongside your exiting tech stack & website, or to build websites inside Symbols itself, we have you covered.
Symbols was built from the ground up to be tech agonistic, and therefore to not force you to leave your existing tech stack, but to enhance it by integrating with it.
Symbols is a platform that allows you to develop advanced reusable UIkits through a design system for web projects, with real-time collaboration between developers and non-developers. This includes working with design system stakeholders such as designers and marketers, whilst seeing their changes made instantly.
Whether you are looking to use Symbols to create design systems / Uikits to be used alongside your exiting tech stack & website, or to build websites inside Symbols itself, we have you covered.
Symbols was built from the ground up to be tech agonistic, and therefore to not force you to leave your existing tech stack, but to enhance it by integrating with it.
What can I use Symbols for?
What can I use Symbols for?
What can I use Symbols for?
The most common use cases for Symbols are:¨
Build UIkits / design systems: components, pages style guide, functions etc.
Building websites and applications: landing pages, personal portfolio, SaaS products, internal tools & integrations, customer portals, etc.
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.
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.
What makes Symbols special among no-code/low-code tools?
Problem with existing tools
The problem with existing no-code/low-code tools is that they limit the level of
How does Symbols solve this problem?
For support from the Symbols team, please message the admins in our Discord server or email us at hello@symbols.app.
Key benefits of using Symbols:
Reusability: 100% customisable components with simplified code to truly reuse components across any web project.
Build, test, document & publish in one place: Take the hassle out of having to learn and switch between multiple platforms & tools, with our suite of integrated documentation and development tools.
Sandbox Development: Build and test components with backend logic in real-time to dev version, in isolation away from your web project
Automated Documentation: Automate the development and maintenance of your design system documentation, as you develop and make changes to your design system.
Collaborate with anyone: No-code and low-code tools removes the complexity and experience needed, for both beginners and experienced developers to create design systems efficiently, without a steep learning curve.
Content meets design: Design your content the way you envision, by combining your CMS with your components.
Collaborate with anyone: Work with other developers and non technical professionals, including both designers and content creators in real time.
Open source: Fully exported your design system away from the platform with the source code.
Tech Agnostic: Use your components anywhere, by switching between frameworks and integrating into existing tech stacks / web development platform.
Version Control: Have peace of mind by reverting back to a previous version of your design system
Automate design changes: Automate any design changes across your UIkit, based on the parameters and styles you have set within your design system
IA(Information architecture): Share common information as component/state among different platforms.
Remove bureaucracy: As the single source of truth, streamline the whole development process by allowing other stakeholders to make changes to the design system themselves
One click deployment: Publish changes to the production version of your UIkit/web project in one click.
Problem with existing tools
The problem with existing no-code/low-code tools is that they limit the level of
How does Symbols solve this problem?
For support from the Symbols team, please message the admins in our Discord server or email us at hello@symbols.app.
Key benefits of using Symbols:
Reusability: 100% customisable components with simplified code to truly reuse components across any web project.
Build, test, document & publish in one place: Take the hassle out of having to learn and switch between multiple platforms & tools, with our suite of integrated documentation and development tools.
Sandbox Development: Build and test components with backend logic in real-time to dev version, in isolation away from your web project
Automated Documentation: Automate the development and maintenance of your design system documentation, as you develop and make changes to your design system.
Collaborate with anyone: No-code and low-code tools removes the complexity and experience needed, for both beginners and experienced developers to create design systems efficiently, without a steep learning curve.
Content meets design: Design your content the way you envision, by combining your CMS with your components.
Collaborate with anyone: Work with other developers and non technical professionals, including both designers and content creators in real time.
Open source: Fully exported your design system away from the platform with the source code.
Tech Agnostic: Use your components anywhere, by switching between frameworks and integrating into existing tech stacks / web development platform.
Version Control: Have peace of mind by reverting back to a previous version of your design system
Automate design changes: Automate any design changes across your UIkit, based on the parameters and styles you have set within your design system
IA(Information architecture): Share common information as component/state among different platforms.
Remove bureaucracy: As the single source of truth, streamline the whole development process by allowing other stakeholders to make changes to the design system themselves
One click deployment: Publish changes to the production version of your UIkit/web project in one click.
Problem with existing tools
The problem with existing no-code/low-code tools is that they limit the level of
How does Symbols solve this problem?
For support from the Symbols team, please message the admins in our Discord server or email us at hello@symbols.app.
Key benefits of using Symbols:
Reusability: 100% customisable components with simplified code to truly reuse components across any web project.
Build, test, document & publish in one place: Take the hassle out of having to learn and switch between multiple platforms & tools, with our suite of integrated documentation and development tools.
Sandbox Development: Build and test components with backend logic in real-time to dev version, in isolation away from your web project
Automated Documentation: Automate the development and maintenance of your design system documentation, as you develop and make changes to your design system.
Collaborate with anyone: No-code and low-code tools removes the complexity and experience needed, for both beginners and experienced developers to create design systems efficiently, without a steep learning curve.
Content meets design: Design your content the way you envision, by combining your CMS with your components.
Collaborate with anyone: Work with other developers and non technical professionals, including both designers and content creators in real time.
Open source: Fully exported your design system away from the platform with the source code.
Tech Agnostic: Use your components anywhere, by switching between frameworks and integrating into existing tech stacks / web development platform.
Version Control: Have peace of mind by reverting back to a previous version of your design system
Automate design changes: Automate any design changes across your UIkit, based on the parameters and styles you have set within your design system
IA(Information architecture): Share common information as component/state among different platforms.
Remove bureaucracy: As the single source of truth, streamline the whole development process by allowing other stakeholders to make changes to the design system themselves
One click deployment: Publish changes to the production version of your UIkit/web project in one click.
What techstack does Symbols use?
What techstack does Symbols use?
What techstack does Symbols use?
Symbols offers a mixture of no-code and low-code tools. To access the full benefits of the platform, including the editor and layers, we use our own javascript based framework, which is low-code and has been developed with easy of mind despite having advanced frontend features.
How does Symbols integrate into a codebase?
How does Symbols integrate into a codebase?
How does Symbols integrate into a codebase?
Symbols offers flexible integration options for your projects. Typically, Symbols designs are consumed like CMS content via an API, but you can also inject generated code into your codebase or publish pages to platforms like Shopify. Symbols is designed to be adaptable and fit into any environment.
Additionally, you can transform your existing code and components into modular elements within Symbols. These elements can include everything from design systems to data sources and complex interactions. Custom controls can also be created to streamline the editing process for various domains.
Symbols allows you to use your current SEO, analytics, core user flows, hosting, CI/CD, and other infrastructure. For features requiring intricate interactivity, all logic and behavior—state bindings, event handlers, etc.—are handled within your own code. To learn more, see integrating with Symbols.
Next steps
Next steps
Next steps
I still have more questions!
I still have more questions!
I still have more questions!
Continue learning:
Search the FAQ
Symbols vs. other tools
Continue learning:
Search the FAQ
Symbols vs. other tools
Continue learning:
Search the FAQ
Symbols vs. other tools
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