Canonic goes full-stack 🚀

We've got some exciting news! Canonic now allows applications to be built end-to-end including the UI & frontend.

One of the most frequent feedbacks that we get from our customers is a lack of frontend support. They're constantly trying to pair it with other tools and services and this leads to a lot of friction. Most of the applications and tools that they make need UI.

Canonic's low-code frontend builder

For the past 6 months, we've been hard at work iterating on this experience and working with our customers to make it incredibly simple to use. Building UI on Canonic is now not only possible but core to the experience of the platform.

The frontend builder makes it incredibly easy to build all sorts of tools and applications and comes with everything needed to build the most complex of applications.

50+ components, UI libraries, and compositions

You can choose from all kinds of components such as tables, maps, forms, and lists. It's easy to just drag and drop them into the canvas. They're previewed live on the canvas along with any of the data they're linked with.

Each component comes with its own predefined set of configurations as well as theming allowing you to customize the component. You can change everything from padding, font-sizes, to colors and variations.

We also support different UI libraries such as Material UI that you can use natively in your project. If a component doesn't exist, you can always use the custom component to build your own. They allow you to define and style your own react components.

Dynamic configuration everywhere

When configuring components, all of their properties can be powered by dynamic values. These dynamic values can come from your workflows, data sources, or other components. You can use simple Javascript to transform this data on the fly.

For example, you can power a table with a Canonic worklfow that gets you all your customers from your Shopify store. {{endpoints.customers}}

An Infinite Live Canvas

You can pan and zoom around the canvas that powers the UI. Drag and drop components, align them, and power them with data in just a few clicks. Rulers help you to make sure all your components are perfectly aligned.

Symbols that you can reuse across your pages

You can turn any component on your canvas into a symbol. This makes the same component available to use on other pages. You can also add configurable inputs to the symbol to change behavior.

For example, you can mark the sidebar component on your page as a symbol and then re-use it across all your pages to make it consistent. Any changes made to this component would then reflect on all pages.

Deploy still takes less than a second

Canonic projects still deploy in under a second. Your front end is deployed to the same URL as your APIs. So if your API was at https://my-project.can.canonic.dev/api then you can access your app at https://my-project.can.canonic.dev

Get Started

The frontend builder comes as a part of the core platform. To get started simply log back in and create a new project. Once the project opens you can simply create a page by clicking on the + inside the left navigation menu.

You can configure the page size, the primary color, and other settings by clicking on the page title.

Once you create a page, you can start building your UI by dragging and dropping components from the component picker on the right. Each component comes with its own set of configurations that can be set by clicking on the component.

You can power these components with data fetched dynamically from your workflows and data sources.

Preview your changes by clicking on the preview icon in the header. Once reviewed, you can deploy your app to get a shareable URL.

You can view the full documentation on docs

That's all for now folks!

We have a lot more releasing soon (hint: testing!) so stay tuned. As always we would love your feedback. Please feel free to say hi at hello@canonic.dev