2c:null 2d:["$","title",null,{"children":"Hello, HTM | Mike Bostock | Observable"}] 32:[] 30:{"id":"ac677a0249b0f0ac","slug":"hello-htm","title":"Hello, HTM","thumbnail":"e91793f25a0556d70a88d0d2ea32615a6f9f89ae0895c54c027c031625ad97a1","access_level":"public","create_time":"$D2018-11-22T18:05:29.387Z","update_time":"$D2018-12-21T02:42:32.343Z","view_time":null,"first_public_time":"$D2018-11-22T18:10:29.523Z","has_unpublished_edits":null,"fork":false,"stars":31,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":58,"publish_version":58,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"c0f2843725eb9b00","slug":"hello","title":"Hello","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Hello, HTM","cells":[{"id":0,"value":"md`# Hello, HTM\n\nRef. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"Preact.render(htm`<${App} page=\"All\" />`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"class App extends Preact.Component {\n addTodo() {\n const {todos = []} = this.state;\n this.setState({todos: todos.concat(`Item ${todos.length}`)});\n }\n render({page}, {todos = []}) {\n return htm`\n

\n <${Header} name=\"ToDo’s (${page})\" />\n

${todo}

\n \n <${Footer}>footer content here\n

\n `;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"Header = ({name}) => htm`

${name} List

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Footer = props => htm`