This page showcases a proof-of-concept of sending code from Notion to an embed.
Why? This makes writing docs with demos and stuff easier because you don’t have to go to a separate website to edit your code, grab a URL, and paste it in Notion. You can keep all your content in one place and use the embed as a means to render the content you have.
To try this out you have to install a user script that will inject code into the Notion application and make it send the code to the next embed. This user-script is 50 lines long and you can inspect its source code to make sure what you’re installing is safe.
Standard disclaimer applies — Only install userscripts from sources you trust or only after inspecting its source code.
In this example the GLSL Fragment Shader code is sent to the embed, which renders it as an animation.
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
st.x *= u_resolution.x / u_resolution.y;
vec3 color;
color = vec3(
abs(cos(u_time * 0.1 + st.x)),
abs(cos(u_time * 0.2 + st.y)),
abs(cos(u_time * 0.3 + (st.x + st.y)))
);
gl_FragColor = vec4(color,1.0);
}
https://notion-glsl.glitch.me/
In this example a chord scribble is sent to the embed, which renders it as a playable chord chart.
scale Ab
Intro:
6m 4 5 [2sus4 2m]
6m 4 5 [2sus4 2]
V1:
6m 4 5 [2sus4 2m]
6m 4 5 [2sus4 2]
6m 4 5 [2sus4 2m]
[6m / / / / / / 5] / 2 /
transpose -5
PC:
1 / b7 /
1 / b7 /
transpose +5
4 /
C:
1 5 6m 4 1 5 6m 4 1 5 6m 4 3m b3 4 /
_:
1 5
V2:
6m 4 5 2m
6m 5 2sus4 2
transpose -5
PC2:
1 / b7 /
1 / b7 /
transpose +5
4
C2:
1 5 6m 4 1 5 6m 4 [1 / / 5] / [6m / / 4] / [3m / / b3] /
_:
4 / 4 /
transpose 5
B:
1 / / / 1 / / /
transpose 2
1 / / /
transpose -7
6m 4 5 2m 4
C3:
1 5 6m 4 1 5 6m 4 [1 / / 5] / [6m / / 4] / 4m [3m / / b3] / / 4 /
The API here is designed in the most agnostic way possible so that it can be used with other apps.
An embed signals that it can receive code input by doing a postMessage call to the parent window.
parent.postMessage({ type: 'code-input-ready' }, '*')
The integration then sends the code back into the embed through postMessage.
event.source.postMessage({ type: 'code-input', code }, '*')