PocketBlocks Docs
English
English
  • Overview
  • Installation
  • Build apps
    • Create a new app
    • App editor
    • Event handlers
    • Write JavaScript
      • Write JavaScript in {{ }}
      • JavaScript query
      • Transformers
      • Temporary state
      • Data responder
      • Built-in JavaScript functions
      • Use third-party libraries
    • Component guides
      • Option lists
      • List View
      • Drawer
      • Image
      • Charts and graphs
      • File upload
      • Custom component
      • Use Markdown
    • Module
    • Design app UI
      • Style, theme, and usability
      • Design an efficient and user-friendly form
    • Navigation
    • Keyboard shortcuts
    • Version and release management
  • Build plugins
    • Develop UI component plugins
  • Workspace management
    • Authentication
    • Members and groups
    • Permissions for resources
    • Custom branding
  • Miscellaneous
    • Where are the Data Sources/Query Library?
    • Embedding Apps
Powered by GitBook
On this page
  • Toolbar
  • Canvas
  • Data browser
  • Query editor
  • Component and property pane
  1. Build apps

App editor

A quick look at the app editor before you start

PreviousCreate a new appNextEvent handlers

Last updated 1 year ago

In PocketBlocks, the app editor is where you assemble components, create javascript functions to interact with PocketBase data, and publish your apps. It consists of five areas:

  1. Toolbar

  2. Canvas

  3. Data browser

  4. Query editor

  5. Component and property pane

Toolbar

The Toolbar is made up of a topbar and a left sidebar.

On the topbar, you can configure your app as follows:

  • Change the app name

  • Export to a JSON file

  • Control the visibility of other areas

  • Share your app

  • Preview and deploy your app

  • Check the history versions

On the left sidebar, some options are available as follows:

  • Show or hide the Data browser

  • Set canvas size and app theme

  • Manage scripts and CSS style

  • Start tutorial for app editor

  • Show keyboard shortcuts

Canvas

The canvas at the center of the editor is where you design and see the overall UI. Drag and drop components onto the canvas, bind them with data and event handlers, and assemble them to build a pleasing and powerful app.

Data browser

Query editor

The query editor lay at the bottom consists of two sections: query list (with Queries and Metadata tabs) on the left, and query settings (with General, Notification and Advanced tabs) on the right. Create queries to interact with Pocketbase API here.

You can access the Pocketbase sdk through the window.pb object.

Component and property pane

The component and property pane is located on the right of the window. Drag components onto the canvas from the Insert tab and edit the properties of the components in the Properties tab.

When a component is selected on the canvas, the Properties tab will be activated automatically and display properties of that component.

Check out for UI layout practices.

The data browser on the left pane contains Queries, Components and Globals sections. Here you can inspect the data in a tree structure. For example, to check the returned data of a specific query or component, find its node in belonging section and clickto expand.

Design app UI