Two More Editor Blocks: Columns and Frame

The last update added two blocks — Mermaid diagrams and Accordion — for content that doesn't read well as a flat page: a flowchart explained in prose, a long optional section nobody wants to scroll past. This week's two additions are about layout rather than content type: putting things next to each other, and setting one thing apart from everything around it.

Columns, for anything that wants to sit side by side#

A setup step next to the command that does it. Two short callouts that don't need a shared heading. A before/after. None of that reads well stacked vertically, and none of it is a "linked destination with a title and icon" — which is what Card and CardGroup are for. Columns is for everything else.

That's two <Column>s inside one <Columns cols={2}>, written directly in this post's MDX — no screenshot, because there's nothing to screenshot. The syntax:

<Columns cols={2}>
  <Column>
    Left side content.
  </Column>
  <Column>
    Right side content.
  </Column>
</Columns>

cols takes 1 through 4 and defaults to 2. Below a phone-width breakpoint every layout collapses to a single column regardless of cols — there's no useful way to show four columns on a 390px screen, so Dokly doesn't try. Column itself takes no props; it's a plain container, and whatever you put inside it (prose, a code block, a Callout) renders exactly as it would outside a column.

Frame, for the "look at this" moment#

The second addition sets a specific piece of content apart from the paragraph around it, with an optional line above (what you're looking at) and an optional line below (a caption). It's built for screenshots and terminal output, but it works on anything:

{
  "pages": [
    { "title": "Getting Started", "path": "/getting-started", "children": [] },
    { "title": "API Reference", "path": "/api", "children": [
      { "title": "Authentication", "path": "/api/authentication" }
    ]}
  ]
}

Without Frame, that JSON block would just be a code block sitting in the middle of a paragraph — fine, but easy to skim past. With a hint above it saying what it is and a caption below saying why it matters, it reads as the thing you're supposed to stop and look at.

The syntax:

<Frame hint="In the settings panel" caption="The settings panel">
  ![Settings panel](/settings-panel.png)
</Frame>

Both props are optional and independent — use just a caption on a figure, just a hint on a terminal recording, or neither if the border and spacing are all you wanted. Frame doesn't replace Callout: Callout is for a note, warning, or tip attached to your argument; Frame is for setting a screenshot, diagram, or output block apart from it visually. If there's no image, diagram, or output to set apart, you probably want plain prose instead of either.

What this doesn't fix#

Columns and Frame bring Dokly to 16 top-level MDX components — Mermaid and Accordion from two weeks ago, these two, plus the original eleven. The larger platforms we're measured against ship closer to 25. Tabs-inside-columns, tooltips, a file tree for showing a repo's structure, and inline field references are still missing; they're the next batches, not a someday list.

If you hit a layout that Columns can't express or a Frame that looks wrong in dark mode, reply to this post or use the contact page — it reaches me directly.

Changelog entries#

Columns and Column components · Added · A new side-by-side layout for arbitrary content — a setup step next to its command, two short callouts, a before/after — distinct from Card/CardGroup, which is for linked destinations with a title and icon. Frame component · Added · Sets a screenshot, diagram, or terminal output apart from the surrounding prose with an optional hint above and caption below.