Adding Widgets | PaperCast Documentation

Building a document in PaperCast is as simple as dragging and dropping.

Adding Widgets Placeholder

How to use Drag and Drop

Open the Widgets tab on the Left Panel.
Click and hold the icon of the widget you want (e.g., Text).
Drag it over the Center Canvas.
As you hover over existing elements, a blue indicator line will appear showing exactly where the widget will be inserted.
Release your mouse to drop the widget.

Container Nodes vs Basic Nodes

When building your structure, it's important to understand the two main types of widgets:

Layout Containers

Widgets like Row, Column, and Stack do not render any text or images themselves. Instead, they act as Containers that hold other widgets.

Use a Row to place items side-by-side.
Use a Column to stack items vertically.

Basic Nodes

Widgets like Text, Image, and Divider are the actual content. They are usually dropped inside of layout containers.

Selection Hierarchy

Sometimes it can be tricky to select a container instead of the text inside it. If you select a Text node, look at the Breadcrumbs at the top of the Property Panel to navigate "up" to its parent Column or Row.

Full-Scale AST Example

To understand how these containers nest together, look at this JSON AST representing a common layout: a column containing a header, followed by a row with an image and text side-by-side.

{
  "id": "container-column",
  "type": "column",
  "layout": { "paddingTop": 16, "rowGap": 8 },
  "children": [
    {
      "id": "title-text",
      "type": "text",
      "props": { "literal": "Employee Profile" },
      "style": { "fontSizePx": 24, "fontWeight": "bold" }
    },
    {
      "id": "profile-row",
      "type": "row",
      "layout": { "columnGap": 12, "alignItems": "center" },
      "children": [
        {
          "id": "avatar-img",
          "type": "image",
          "props": { "urlBind": "employee.avatarUrl" },
          "layout": { "width": 64, "height": 64 }
        },
        {
          "id": "bio-text",
          "type": "text",
          "props": { "literal": "Software Engineer II - PaperCast Team" },
          "layout": { "flexGrow": 1 }
        }
      ]
    }
  ]
}