skip to content
Site header image Nerdy Momo Cat

Supported blocks in Webtrotion

Almost all of them!

Last Updated:
Information Notion
Table of contents
The main thing to remember is it does not support child databases and child pages. I don’t plan to support those till Notion adds a native embed option.

Heading 1

Heading 2

Heading 3

Toggleable Heading 1

contents

Toggleable Heading 2

Toggleable Heading 3

Paragraph

Paragraph

bold

italic

Underline

Strike

link

code

← page with no access

color

color background

common latex code 4=54=5

colored block

colored text with colored block

Color Test

Name Text LM (Hex) Text DM (Hex) BG LM (Hex) BG DM (Hex) Select LM (Hex) Select DM (Hex)
Default 37352F FFFFFF (90%) FFFFFF 2F3437 CECDCA (50%) 505558
Gray 9B9A97 979A9B (95%) EBECED 454B4E 9B9A97 (40%) 979A9B (50%)
Brown 64473A 937264 E9E5E3 434040 8C2E00 (20%) 937264 (50%)
Orange D9730D FFA344 FAEBDD 594A3A F55D00 (20%) FFA344 (50%)
Yellow DFAB01 FFDC49 FBF3DB 59563B E9A800 (20%) FFDC49 (50%)
Green 0F7B6C 4DAB9A DDEDEA 354C4B 00876B (20%) 4DAB9A (50%)
Blue 0B6E99 529CCA DDEBF1 364954 0078DF (20%) 529CCA (50%)
Purple 6940A5 9A6DD7 EAE4F2 443F57 6724DE (20%) 9A6DD7 (50%)
Pink AD1A72 E255A1 F4DFEB 533B4C DD0081 (20%) E255A1 (50%)
Red E03E3E FF7369 FBE4E4 594141 FF001A (20%) FF7369 (50%)
Background

the lazy cat meows and meows at the flailing kitten

Text

the lazy cat meows and meows at the flailing kitten

Bulleted List

  • Bulleted List
  • Uni
  • Tako
    • AAA
    • BBB

Numbered List

  1. Numbered List
  2. Kani
  3. Ika
    1. 111
    2. 222
      1. Third!

To Do

To-do 1
Todo 2
A bit complicated now
A bit more
complicated now?

What if child has no box?

What if there is suddenly a heading?

💡
Huh?
Oh
To-do 3
Todo 4
Todo 5
Todo 6

Column List

Column 1

Column 2

Columns inside columns

Column 1

Column 1 still

Column 2

Column 2a

Column2 b

Divider

Callout

ℹ️
Callout
Line break
Hello
SO many callout tests!

Like cols

And more cols

Colored Callout and background color

Code

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
This is code caption.
a=32
if a:
	x =23


Also supports shiki transformers:

What you write

# <<shiki-transform>> 
# use this keyword to tell it to transform code
a=32
if a: 
	x =23

What you get

a=32
if a: 
	x =23

CodePen Embed

Code with Mermaid diagram

flowchart LR;
  A[Hard Edge] --->|LinkText|B(Round Edge)
Mermaid notation

Trying HTML injection

Remember this directive can be changed, check out

Hover Me
Pasta

Spaguetti Bolognese

30 Mins   |   1 Serving

A random fancy hover card (source)

Trying HTML injection

Quote

Quote Block
Colored Quote Block

Equation

Inline equation here c=±a2+b2c = \pm\sqrt{a^2 + b^2} for testing

Block equation below.

c=±a2+b2c = \pm\sqrt{a^2 + b^2}

Table

Know that Table column/row colors do not show up in Notion API

Simple Table Ika Tako Shake
1 2 3 4 5
a b c d e
A B C D E

File

A file about XYZ Download
Indented File
PDFTriage: Question Answering over Long, Structured Documents Download

Toggle

Toggle

This is toggled details.

  • 1
  • 2
  • 3
Toggle inside toggle

More toggles!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut volutpat nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut volutpat nunc.

Long enough toggle to see what happens to the marker here.

Link to page

Introducing Webtrotion

Synced Block

♻️
Synced Block
  • 1
  • 2
  • 3
♻️
Synced Block
  • 1
  • 2
  • 3

Synced block from a different page

tl;dr

And that concludes my TED Talk on "Just Pick Your Tool, Keep Evaluating It." Remember, choosing the right note-taking app is all about finding the one that best meets your requirements and preferences. Once you've made your choice, continue evaluating it regularly to ensure it continues to serve your needs effectively.

By refining your requirements, assigning tool scores, and conducting checks on accessibility, stability, and usability, you can make an informed decision on which app to use. Don't be swayed by shiny new tools that may not fulfill your actual needs. Stay true to what works best for you and your note-taking process.

So, go ahead, pick your tool, and embark on a journey of continuous evaluation and improvement. Happy note-taking!

All Mentions

Dates: Nov 23, 2023, 05:27 AM Nov 22, 2023 Nov 17, 2023 to Nov 22, 2023 Nov 23, 2023, 05:00 PM and People:

I did something very normal Nov 22, 2023 which is a huge deal!

Linked Blocks and Pages

This links to heading Column List

But we can also have links that are not on direct children of the page, right?

This inside toggle links to heading Column List

This links to a headingShow information for the linked content in another webpage

This links to a heading in same page but an internal block (not main page, nested in)

This links to block IkaShow information for the linked content (now supported)

Linked page with URL

What are complete links?

Link to main pages Show information for the linked content

Introducing Webtrotion

But paste link as mention doesn’t work:

Image

Caption for an image
Caption for an image

Audio

Link Preview & Bookmark

Other Embeds

Twitter

And a caption for the tweet!

Spotify

tldraw

Raindrop

YouTube

And a caption for youtube video

Tiktok

Instagram

Shelby Grace Instagram with orange hair

Maps

Using the embed link by google

Captions work! And click the black button on right to expand!

Using general link by google (it auto converts)

Using Notion embed

Using HTML directive

<!DOCTYPE html>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.8625104973885!2d103.82304464999999!3d1.2541673500000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da1955a615a343%3A0x3094037d34e6529f!2sUniversal%20Studios%20Singapore!5e0!3m2!1sen!2sus!4v1701509011225!5m2!1sen!2sus" width="200" height="150" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
This google maps will go out of margin if we set width to 600 and height to 450. So, embeds are usually a better idea!

In columns

Loom

Loom/any video embed using Notion’s option is not supported at the moment

But it works if you use their embed URL

Direct Uploaded Video

This is a direct uploaded video caption!

Known stuff that is not supported/has bugs

  1. Multiple injections on a single page if not handled carefully, have clashes can have a problem!
  2. Resizing for embedded html is a problem, for things like d3.js, but does it matter? How does distil handle it?
  3. If you use npm run dev without npm run build, some things may not be download leading to:
  4. CSS generation is also now associated with build. Run the build command once before running dev please.
  5. Synced blocks do not change the update timestamp of the pages the block is synced to — so they are not updated unless you end up building without cache, or updating the fields in the individual pages where the blocks are synced.
  1. Table column colors are not supported through API
  2. Block mentions are not supported through API
  3. Comments are not supported
  4. Word breaks are an issue on smaller screen if there is no viable place to break them. Currently I am using word-wrap:normal;
  5. I do not plan to add support for inline databases but I’d love if anyone wants to contribute?
  6. Child Pages are too much work to support and I do not have a personal usecase for it!
  7. Column widths and embed widths are not exposed in API
  8. Backlinks are not exposed in API so I do not know how to do Links to This Note
  9. Right now, if I click on a tag from “unlisted” URL and that tag is only attached to that post, no tag page is generated, and I think that isn’t a bad thing!
  10. If you post a parent block with child sync block to another workspace, it will not show up in UI but does show up in API causing warnings/errors
  11. Heading ids are generated based off text. If you have two headings with same names, that is an issue. I can change it to use block id, but then they are illegible to anyone using an href link for them to share.