Skip to main content

Widget Studio

The Widget Studio is where you write, preview and publish a Widget. To open it, open one of your Widgets from My Profile and choose Edit. It needs a desktop browser.

The Widget Studio: the AI and Code tabs and the code editor on the left, the Output panel under it, and the preview on the rightThe Widget Studio: the AI and Code tabs and the code editor on the left, the Output panel under it, and the preview on the right

Layout​

The AI and Code tabs at the top of the Widget StudioThe AI and Code tabs at the top of the Widget Studio
AreaWhat it's for
AI tabDescribe what you want and let AI write or change the code. Experimental.
Code tabThe code editor, with auto-complete for React, the Blotch Library, your Inputs and your images, and red underlines for type errors.
OutputBelow the editor. See Output.
PreviewOn the right. Shows your Widget, redrawn a couple of seconds after you stop typing. Choose a Preview size, or drag the preview's edges to try any size. The Border menu tries the borders people can put around it.

The toolbar shows the version you last published, Unpublished changes if you've saved since, and Publish. A meter shows how much of the length limit for a Widget's code you've used.

The toolbar: the File and Edit menus, the version last published, the length meter and the Publish buttonThe toolbar: the File and Edit menus, the version last published, the length meter and the Publish button
The File menu of the Widget StudioThe File menu of the Widget Studio
The Edit menu of the Widget StudioThe Edit menu of the Widget Studio
MenuItemWhat it does
FileSaveSaves your code and Public Inputs. Ctrl+S (⌘S on a Mac).
Publish…Releases your latest save. See Publish and release versions.
Version History…Every save, with what changed. Restore loads one into the editor.
Widget ConfigName, description, icon, category and visibility. See Widget settings.
InputsPublic Inputs, Private Inputs and Integrations. See Input types.
AssetsYour uploaded images. See Add your own images.
DeleteDeletes the Widget. Only shown while nobody has it installed.
EditInsert Icon…Finds an icon and adds the code to draw it. Ctrl+Shift+. (⌘⇧. on a Mac).
Toggle Preview ThemeSwitches the preview between the light and dark themes.
FormatTidies your code's layout.
Clear ChangesThrows away everything you haven't saved.

Output​

The panel under the editor has three tabs:

  • Output shows what your Widget logs with console.log, console.warn and console.error, and any error it stops on. Choose Fix with AI beside an error for a suggested fix. Other console methods, such as console.table, aren't available.
  • Typings shows the type definitions the editor is loading for the packages you import.
  • Network shows each request your Widget makes and its response. Choose Create Type Definitions beside a response to copy a TypeScript type for it.

Clear logs empties the current tab. The lock turns auto-scrolling on and off.

The panel under the editor, with its Output, Typings and Network tabs, a Clear logs button and the auto-scroll lockThe panel under the editor, with its Output, Typings and Network tabs, a Clear logs button and the auto-scroll lock

Your code​

  • Your Widget is the component named Widget, or the file's default export:

    export const Widget = () => {
      // ...
    };

  • Write TypeScript or JavaScript. Type errors are underlined, but don't stop your Widget from drawing or publishing.

  • Style with Tailwind CSS. The only colors are foreground and background. See How Widgets run.

  • Import from the Blotch Library with ~lib/, and from npm with a pinned version. See Use npm packages.