Public
Edited
Jan 15, 2023
Insert cell
Insert cell
/*code = `
    const App = () => {
return (
<div>
<h1>Voila!</h1>
</div>
)
}

ReactDOM.render(App(), root)
`*/
Insert cell
import { CodeMirror,myDefaultTheme } from '@kreijstal/codemirror'
Insert cell


viewof code = CodeMirror(`const App = () => {
return (
<div>
<h1>Voila!</h1>
</div>
)
}

ReactDOM.render(App(), root)`, {
extensions: [myDefaultTheme],
keymaps: [],
})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
transpiled = Babel.transform(code, { presets: ['es2015', 'react'] }).code
Insert cell
Insert cell
//React = require('https://wzrd.in/standalone/react@latest')
Insert cell
//ReactDOM = import('react-dom')
Insert cell
import {React, ReactDOM, htm, styled} from "@hastebrot/react@356"
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more