You create every Blocky widget from the dashboard in the same way: you choose a category, a Widget type, and a template, and Blocky opens the widget in the editor. Charts, quotes, and flashcards also ask for Notion data.
Widget categories and types
Blocky has 18 Widget types in 4 categories. The create dialog uses shorter labels than the rest of these docs. For example, the Radial chart is Radical in the dialog, and the World clock is World.
| Category | Widget type | Label in the create dialog |
|---|---|---|
| Charts (Chart) | Area chart, Bar chart, Line chart, Pie chart, Radar chart, Radial chart | Area, Bar, Line, Pie, Radar, Radical |
| Timers (Timer) | Stopwatch, World clock, Countdown timer, Pomodoro timer | Stopwatch, World, Countdowns, Pomodoro |
| Study tools (Study) | Flashcards, Habit tracker, Progress tracker | Flashcards, Habit, Progress |
| Misc (Misc) | Streak tracker, Horoscope, Dice roller, Quotes, Mood tracker | Streaks, Horoscope, Dice, Quotes, Mood |
Each Widget type has several templates, such as the Normal and Boss templates of the Pomodoro timer. A template sets the starting layout and look of the widget. The category pages list the templates of each type: charts, timers, study tools, and misc widgets.
Which widgets take Notion data
Only charts, quotes, and flashcards take Notion data:
- A chart always draws its data from a Notion database. The create dialog asks for the database before it opens the editor.
- Quotes and Flashcards can use a Notion database, or a list that you write in the editor.
The other Widget types do not use Notion data. Some of them have values that you set in the Inputs tab of the editor, such as the Focus time of a Pomodoro timer.
Create a widget
- In the dashboard, click Create widget. On a narrow screen, the button says Create. The Choose a widget dialog opens.
- Under Category, pick Chart, Timer, Study, or Misc.
- In Widget type, choose the type, such as Radical for a Radial chart.
- Under Style, pick a template. For every widget except charts, you can switch to another template later in the editor.
- For Quotes or Flashcards, decide where the data comes from. To use a Notion database, turn on Add a datasource. To write your own list in the editor, leave it off.
- Click the button at the bottom of the dialog:
- For a chart, or for Quotes and Flashcards with Add a datasource turned on, click Continue to data. The Connect your data step opens. Go to step 7.
- For every other widget, click Open editor. Go to step 9.
- In Notion Datasource, choose the Notion database. If the step says No Notion datasources found, connect Notion first.
- Choose the properties that the widget reads, and click Open editor:
- For a chart, set Label Field to the property that groups your rows into chart labels. Value Fields are optional number properties. Leave them empty to count how many rows share each label.
- For Flashcards, set Question Field and Answer Field. Options Field holds the choices for the Quiz template.
- For Quotes, set Quote Field and Author Field.
- For Quotes and Flashcards, you can click Skip for now instead, to continue without Notion data.
- Blocky opens the template in the editor as an Editor draft. Change the widget there. The Editor tour shows the parts of the editor.
- Click Save in the header to publish the widget, as Save and publish explains.
- Copy an Embed link of the widget and paste it into Notion, as Embed a widget in Notion explains.
Change a widget in the editor
The editor shows the widget as a set of Elements in the Elements panel, and the settings of the selection in the Settings panel. Most settings, such as Size, Colors, Corners, and Font, work the same way in every widget. The settings page explains these shared controls.
The Widget types differ in their Inputs and their Parts:
- The Inputs tab holds the values that the widget works with, such as the target date of a Countdown timer or the data source of a chart.
- A Part is a piece of an Element that you can select and style on its own, such as the time display of a Pomodoro timer. Each Widget type has its own Elements and Parts.
The category pages list the templates, the Inputs, and the Parts of each Widget type.