skip to content
Site header image Demo Astro Notion Setup

Supported blocks

Almost all of them!

Last Updated:
Information
Table of contents
For using the template and the corresponding code, go to Introducing Webtrotion
The main thing to remember is it does not support child databases and child pages.

Heading 1

Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens.

Heading 2

Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens.

Heading 3

Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens.

Toggleable Heading 1

contents

Toggleable Heading 2

content

Toggleable Heading 3

Paragraph

Paragraph

bold

italic

Underline

Strike

link

code

← No access page

Empty Block below


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

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 Introducing Webtrotion

Hover Me
Pasta

Spaguetti Bolognese

30 Mins   |   1 Serving

A random fancy hover card (source)

Trying HTML rendering

Remember this directive can be changed, check out Introducing Webtrotion

Quote

Quote Block
Colored Quote Block

Equation

Inline equation here 1+q2(1−q)+q6(1−q)(1−q2)+⋯=∏j=0∞1(1−q5j+2)(1−q5j+3),for ∣q∣<1.1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1. for testing

Block equation below.

ΔE00∗=(ΔL′kLSL)2+(ΔC′kCSC)2+(ΔH′kHSH)2+RTΔC′kCSCΔH′kHSH\Delta E^*_{00} = \sqrt{ \Big(\frac{\Delta L'}{k_LS_L}\Big)^2 + \Big(\frac{\Delta C'}{k_CS_C}\Big)^2 + \Big(\frac{\Delta H'}{k_HS_H}\Big)^2 + R_T \frac{\Delta C'}{k_CS_C} \frac{\Delta H'}{k_HS_H} }

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

New Features and Changelog

Jul 6, 2024: Simple tables with search and sortShow information for the linked content. Unlike notion where your simple tables are basically just a form of displaying data, you can now search and sort your simple tables in webtrotion. Just have column headers and use <<🗂️>> in the first cell (modifiable in constants-configShow information for the linked content).


Jul 4, 2024: Breaking change → the shortcode for HTML rendering in an iframe (if you want to use external libraries like d3.js has changed to <!DOCTYPE html> <!-- iframe --> and for injecting it directly into the body is now <!DOCTYPE html> <!-- inject -->. This helps you have code blocks that are in html and start with <!DOCTYPE html> without rendering them.

Jun 30, 2024: View transitions are back in and use ⌘K or ^K to search
Jun 28, 2024: Floating table of contents and shiki transforms for code blocks (updated to astro 4.11), and added view transitions
Jun 14, 2024: Pin posts to top
Jun 15, 2024: Add tag descriptions
Dec 12, 2023: Add support for preview popovers
Dec 2, 2023: Added interlinked content section
Dec 4, 2023: Add support for recent posts on homepage

Nov 29, 2023: Caching

All Mentions

Dates

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)

This links to a block in another same site pageShow information for the linked content

Linked page with URL

What are complete links?

Link to main pages Show information for the linked content

Home

But paste link as mention doesn’t work: Mind map & Outline Ideas - Escape

Image

Caption for an image
Caption for an image

Audio

Link Preview & Bookmark

Other Embeds

Twitter

And a caption for the tweet!

Spotify

I got a blank space baby and I’ll write your name 😉

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?

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.
  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.