Veryfront Logo

Studio Tour

The Veryfront Studio  

The Veryfront Studio is an online IDE for rapid web app development. This guide introduces you to the various areas and elements of the interface that you need to know to start building with Veryfront.

Sign in  

You can sign in at https://veryfront.com/sign-in using a Google or GitHub account.

Sign-in screen UI

After signing in, you are redirected to the Dashboard.

Dashboard  

The Dashboard lists your projects and allows you to create new ones. You can find it at https://veryfront.com/dashboard.

Dashboard UI

Simply click on a project to open it in the Builder.

Builder  

The Builder is Veryfront’s main workspace, which you can find at https://veryfront.com/builder/[YOUR-PROJECT-SLUG].

Builder UI

It contains the following elements:

  1. Live Editor
  2. Live Preview
  3. Top Bar
  4. Sidebar
  5. Project Settings

Live Editor  

The Live Editor allows you to edit your project’s pages, components, and theme file.
It's optimized for app development with React and MDX.

Builder UI Live Editor

Some vital shortcut commands:

  • F1: view the full command list.
  • Ctrl+S/CMD+S: save your work on the current file.

Live Preview  

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

Builder UI Live Preview

It features the following elements:

  1. Navigation buttons: back, forward, refresh.
  2. Address bar: displays the URL of the currently edited component or page.
  3. Preview options:
  • Pin Preview URL / Unpin Preview URL: keep displaying the current preview in the Live Preview even after switching to another component or page in the Live Editor.
  • Updates on Save / Updates on Typing: toggle between updating the Live Preview on save or each keystroke.
  • Hide Layout / Show Layout: toggle the page layout to isolate the current component from the default layout styling.
  • Open in New Window: open the preview URL in a new browser tab.
  • Hide Preview / Show Preview: show and hide the Live Preview.

Top Bar  

Builder UI Top Bar

The Top Bar features the following elements:

  1. Veryfront logo: navigate to the Dashboard.
  2. Save button: save the file currently open in the Live Editor.
  3. Publish button: publish your app to Veryfront’s production environment at veryfront.app and any connected custom domains.

The Sidebar contains the main menu of the Builder and allows you to access Veryfront’s editing tools and your project’s settings.

Builder UI Sidebar

It contains the following menu items:

  1. Insert: quickly add components to your pages. Click a component to insert the respective code at the current cursor position in the Live Editor. Veryfront provides a variety of pre-built components, but you can also create components yourself or import them via plugins.
  2. Pages: manage your project’s pages, create new pages, and edit them in the Live Editor.
  3. Components: manage your project’s components, create new components, and edit them in the Live Editor.
  4. Theme: define the global theming settings for your project in a JSON file.
  5. Provider Settings: set the global App Component and the default Layout component. The former is the top-level provider component of your project, and the latter wraps a page and is wrapped by the App Component.
  6. Project Settings: access the Project Settings.
  7. User Account: log out from Veryfront.

Project Settings  

Access your project’s settings, which you can find at https://veryfront.com/dashboard/projects/[PROJECT-SLUG]/settings.

Builder UI Project Settings

The Project Settings menu contains the following items:

  1. Project: manage your project’s name, slug, search engine rules, and preview domains.
  2. Users: manage your project’s collaborators.
  3. Plugins: enable and disable plugins.
  4. Embeds: activate embedding and generate the relevant code.
  5. Hosting: connect your project to a custom domain.
  6. Billing: manage your project plan.
Project Settings Numbered Items

Next Steps  

As a next step, we recommend the Getting Started guide to learn how to create pages, add components, and publish your app.

<  About VeryfrontGetting Started  >
Veryfront Logo

GDPR
COMPLIANT


© 2022 CoderSociety GmbH. Hosted in Germany.

Made with Veryfront