skip to content
🌑 Blog. Vision & Version

Supported blocks

Last Updated:
Information
Table of contents
For using the template and the corresponding code, go to Introducing ASTRONOtionnn
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

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 ASTRONOtionnn

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 ASTRONOtionnn

Synced Block

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

Synced block from a different page

Nulla gravida metus at ex lobortis, eget scelerisque tellus consectetur.

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 ListShow information for the linked content
But we can also have links that are not on direct children of the page, right?
This inside toggle links to heading Column ListShow information for the linked content
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 pageShow information for the linked content , 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 URLShow information for the linked content
What are complete links?
Link to main pagesShow information for the linked content
Home

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