Executing code cells

Table of Contents

Bugs 🐜 and To do ✅

  • executed cell gets replaced with its output.
  • more robust outputs
    • replace "connected" output on exec
  • Extract transpilation as Transfomers


txtUpdated 134.9w ago
return new Object({foo: "bar"})
txtUpdated 133.8w ago
{ foo: 'bar' }

Async and Promises

const wait = (ms) => {
  return new Promise(resolve => {
    setTimeout( () => {
      resolve(new Date())
    }, ms)
return wait(1000)
txtUpdated 134.3w ago
Wed Apr 28 2021 23:44:37 GMT+0100 (BST)
return fetch('https://example.com')
       .then( res => res.status )
txtUpdated 133.9w ago
return (async fn => {
    const size = await lit.fs.du('/')
    console.log("Local filesystem size:")
    return size
txtUpdated 129.9w ago
Local filesystem size:


The meta syntax for transformers/transpiling is not yet stable, for now use the experimental babel attribute, combined with specifying the source lang in the filename extention. (Currently requires explicitly setting repl to js to execute)

type Options = {[key: number]: string}
const fn = (opts : Options) => {
  const str:string = 12 
  // need linting to make this useful
  return str

return fn()
txtUpdated 135.2w ago

React jsx

Using the experimental react attribute, a Cell can define its own content as a component, warning due to needing to use the same React instance as the parent application, the below with dynamic import won't work.

import React from 'https://cdn.skypack.dev/react'

const Component = props => {
  return <div></div>

return <Component/>
txterrorUpdated 133.8w ago

Instead, get React from the utils in the lit global.

const React = lit.utils.React
const { useState } = React
const Clicker = props => {
    const [c,setC] = useState(0)
    //console.log(React, useState, c)
    const click = e => setC(c+1)

    return <button onClick={click}>{ "Click me: " + c}</button>

return <Clicker/>


See Custom Viewers for information on built in viewers and how to create custom ones.

Raw svg string

svgUpdated 129.9w ago


js> md
console.log("A __*result*__: **`" +  42/13 + "`**")
return 42
mdUpdated 135.3w ago

A result: 3.230769230769231 42

js> json
return { foo: 'bar'}
jsonUpdated 135.3w ago
{ foo: 'bar' }

Meta: lit global and AST

When executing a Cell this refers to the hast node for that cell.

js> json #this !collapse
return this

To get the mdast for the document, you need to refer to the global lit object.

js> json #ast #position !collapse
return lit.ast

To get info about the location of the current document, see lit.location.

js> json #location !collapse
return lit.location
js> json #utils !collapse
return lit.utils

Finding nodes in the ast can be done either manually or using some of the unist utils available

js> json #heading #title
const select = lit.utils.unist.select.select
return select('heading', lit.ast)   
js> json #headings !collapse
return lit.utils
          .selectAll('heading', lit.ast)
          .map( h => `${h.depth} ${h.data.id }`)
js> json #sectiontitle !collapse
// get the title of the section containing the currently selected cell
// some utilities still need exposing to achieve this.
const currentPos = {}
const atPosTree = {}
const section = 
return "TBD..."

Mutating Self

Code cell execution which modifies the content of a .lit document outwith of its own (attached) output cell, initially itself, but then try an external doc.

// Mutated at Sun May 02 2021 12:59:07 GMT+0100 (BST)
const src = lit.file.contents
const unist = lit.utils.unist

const select = unist.select.select
const source = unist.source
const patchSource = unist.patchSource.default

const selector = 'code[meta=#mutateme]'
const node = select(selector, lit.ast)
const pos = node.position

const original = source(pos, src)
const newSrc = "```js #mutateme\n// Mutated at " + new Date() + "\n```"

return patchSource(src, pos, newSrc)
mdwarnUpdated 133.8w ago

⚠️ This uses the still experimental selfmutate attribute, and affects content outside of it's own attached output cell.

Dynamic imports

return (async args => {

  const confetti = await 

     origin: {y: 0},
     spread: 55,
     particleCount: 100,
     ticks: 1000,
  return "Wait for it... 🥳"
txtUpdated 75.3w ago
Wait for it... 🥳