Veryfront Logo



App Component  

The App component is a wrapper that sits at the top level of the component hierarchy and wraps your project’s layouts. This is where you typically define your HTML head, for example.



The Builder is Veryfront’s main editing view, where most of your editing, composing, and iteration work takes place. It consists of:

  • Top bar
  • Sidebar
  • Live Editor
  • Live Preview


Chakra UI  

Chakra UI is a component library for building React applications. Every Veryfront project uses the Chakra default theme and Chakra UI components.


Components are independent and reusable bits of code. Veryfront knows two main component types: UI components and provider components.

Component Hierarchy  

Every Veryfront project has the same component hierarchy:

  • The app component is the outer wrapper, and wraps around the Layout. There’s only one app component. It contains elements like the HTML <head> and global providers.
  • The layout component is the inner wrapper, and wraps around the pages. Every project has a default layout, but you can create additional ones to overwrite the default layout on a per-page-basis. For example, contains elements like the footer or navigation.
  • The page contains individual UI and content. For example, contains elements like forms, text, images.



The project dashboard allows you to access all your Veryfront projects and create new ones. Every time you sign in to Veryfront, you will be redirected to this page.



You can use YAML Frontmatter to store metadata with additional page information, making application development even more straightforward.

  1. You can define placeholder values in a component’s frontmatter
  2. You can use the frontmatter to declare and use global variables within a page, layout, or app component



A Layout in Veryfront is a component that wraps around your pages. It usually contains page elements that your website or app needs repeatedly, such as the navigation and footer.

Live Editor  

The Live Editor is where you edit your project’s files and compose your app’s pages.

Live Preview  

Live Preview is an on-page browser that lets you instantly see changes to your project files as you make them.



With MDX you can mix JSX and Markdown to quickly develop apps through component composition. We chose it for Veryfront because it is super fast, intuitive, and easily customizable.



Every page you create in Veryfront is a page of your website or web application.


  • Component Path: used in import statements and preview URLs. Veryfront automatically generates one as the camel-cased version the component name.
  • Page Path: the path you create for your page, used to generate preview and production URLs.


Veryfront comes with a bundle of pre-installed plugins that you can activate for your projects to bring in exciting features and integrations with other services. Depending on your subscription, you can install your own plugins to provide highly customized features to your project.


You can view your page edits in real-time in the Live Preview next to the Live Editor or with the preview URL in a new browser tab.

Preview URL  

The URL where you can preview your project. For this, your project slug becomes a subdomain of The format: https://{project-slug}{page-path}

Production URL  

The URL where you can view your project live. For this, your project slug becomes a subdomain of The format: https://{project-slug}{page-path}


In a project, you create, store, and manage your website or web app’s pages, custom components, plugins, integrations, etc.

Publishing Workflow  

When creating websites and apps with Veryfront, you repeatedly go through three main phases: Edit, Preview, and Publish.

We call this the publishing workflow.

Production Environment  

This is the place where your projects "live" once you click "Publish" in Veryfront. A website or web application in the production environment is available through your production URL or custom domain.


The sidebar is the main menu of the Builder, from which you can access all of the editing tools and settings in your project.

It contains the following menus:

  • Insert: displays all pre-built and custom components of your project sorted into categories. It allows you to quickly add a component to your page.
  • Pages: lists all pages in your project and allows you to switch between them and create new ones.
  • Components: lists all custom components in your project and allows you to create new ones.
  • Theme: a JSON file in which you can overwrite the Chakra default theme and define your own theme styles.
  • App Settings: settings for defining the app component of your project and the default layout.


A slug in Veryfront is the camel-case version of a name, like the project name, used for creating preview and production URLs.


Veryfront offers various subscription plans to meet the different needs of individual developers, development teams of any size, and enterprises. You can view the available plans and their details on the Veryfront website.



The theme is where you set the look and feel of your website or web app, i.e., its colors, fonts, spacing, etc.

<  Tracking PluginChangelog  >
Veryfront Logo


© 2022 CoderSociety GmbH. Hosted in Germany.

Made with Veryfront