Styling Elements

PaperCast provides a powerful Property Panel on the right side of the screen that gives you CSS-like control over your document's appearance.

The Box Model (Layout Tab)

Every widget in PaperCast adheres to the standard CSS Box Model. When you select a widget and open the Layout tab, you can adjust:

1. Width & Height: Set fixed dimensions (e.g., 100px) or percentages (e.g., 100%).
2. Padding: Space inside the element's border. Useful for giving text some breathing room inside a container.
3. Margin: Space outside the element's border. Useful for pushing other elements away.

Flexbox Controls

If you have selected a container like a Row or Column, you will see Flexbox controls:

• Direction: Choose whether children flow horizontally (Row) or vertically (Column).
• Justify: How to align children along the main axis (e.g., Center, Space Between).
• Align Items: How to align children along the cross axis.
• Gap: The amount of space to automatically insert between children.

Typography and Colors (Style Tab)

To make your document look professional, use the Style tab. Here you can adjust:

• Font Family: Select from modern fonts like Inter, Roboto, or standard system fonts.
• Font Size & Weight: Make text larger, bolder, or italicized.
• Colors: Apply text colors and background colors using hex codes (e.g., #FF0000).
• Text Align: Left, Center, Right, or Justify.

Full-Scale Styling Example

Here is the JSON representation of a highly styled alert box demonstrating complex BoxModel properties (borders, flexbox) and Typography inheritance:

{
  "type": "row",
  "layout": {
    "direction": "row",
    "alignItems": "center",
    "justifyContent": "space-between",
    "paddingTop": 16,
    "paddingBottom": 16,
    "paddingLeft": 24,
    "paddingRight": 24,
    "borderLeftWidth": 4,
    "borderLeftStyle": "solid",
    "borderLeftColor": "#ef4444",
    "borderTopWidth": 1,
    "borderTopColor": "#e5e7eb",
    "borderRightWidth": 1,
    "borderRightColor": "#e5e7eb",
    "borderBottomWidth": 1,
    "borderBottomColor": "#e5e7eb",
    "backgroundColor": "#fef2f2"
  },
  "style": {
    "color": "#991b1b",
    "fontFamily": "Inter, sans-serif",
    "fontSizePx": 14
  },
  "children": [
    {
      "type": "text",
      "props": { "literal": "Critical Error: Database connection lost." },
      "style": { "fontWeight": "bold" }
    },
    {
      "type": "text",
      "props": { "literal": "Retry" },
      "style": { "textDecoration": "underline", "cursor": "pointer" }
    }
  ]
}