teeny

Try it out

teeny is a code editor specifically developed for live coding performance. The design goals are:

• Single file for basic configuration to include via one <script> tag
• Small. teeny is currently ~6 KB minified. Other popular editors (albeit containing many more features) are between 125--350 KB minified.
• No build script (ok, there's optionally one to minify, but it's, like, totally optional)
• Zero dependencies
• Prioritize simplicity over speed
• Responsive design / mobile support
• Accessible to alternative reading devices
• Code annotations / visualizations (eventually)

Key bindings

The default keybindings are:

• Ctrl+Enter: Run (and flash) single line at current cursor location
• Alt+Enter: Run (and flash) block surrounding current cursor location. Blocks are delimited by blank lines (including spaces).

Syntax coloring

teeny tries to be as flexible as possible in enabling you to decide what parts of your syntax should be highlighted and how. teeny.rules contains a dictionary of regular expressions associated with syntax categories. Whenever a match for a rule is found, a CSS custom highlight is applied with the same name as the rule. For example, below is the CSS and JS required to make a highlight for numbers.

::highlight( numbers ) { background-color:red; color:white; }

teeny.rules = {
  numbers: /\b(\d+)/g 
}

The CSS Custom Highlight API only supports a small subset of CSS that doesn't affect page layout; this stops the highlights from forcing entire page redraws and instead limits redraws to the highlights alone, improving efficiency. The subset includes:

• background-color
• color
• caret-color (aka cursor color)
• text-shadow (not currently supported in Firefox)
• text-decoration (not currently supported in Firefox)

To disable syntax coloring, just don't specify a value for teeny.rules. If you're not comfortable using regular expressions, here is a great playground to explore.

To use

Call teeny.create(), maybe with some config options, to return a new teeny instance. If you name that instance b, call b.subscribe( 'run', callback ) to register your callback function to be called whenever code is executed.

Here's the javascript demo:

const initialCode = 
`function hello( name ) {
  console.log( name )
}
 
hello( 'teeny' )`

window.onload = function() {
  const b = teeny.create({ 
    flashColor:'red',
    flashTime: 100,
    value: initialCode
  })

  // just eval the code that is passed to the callback
  b.subscribe( 'run', eval )
}

Events

There are several events you can register for. The syntax for registering for events takes the form teenyinstance.subscribe( 'eventname', callback ). The callback will be passed the associated JavaScript Event object. The available events are:

• click - whenever a mouse click (or touch) is detected within the editor. Any registered callback will receive a PointerEvent.
• keydown - whenever a key is pressed when the editor is focused. Any registered callback will receive a KeyboardEvent.
• keyup - whenever a key is released when the editor is focused. Any registered callback will receive a KeyboardEvent.
• run - whenever Alt+Enter or Ctrl+Enter (option and command in macOS) are pressed. Any registered callback will receive the code that was executed followed by the associated KeyboardEvent.

So, for example, to detect whenever Shift+Space is pressed, you might use the following code:

window.onload = function() {
  const b = teeny.create()
  teeny.subscribe( 'keydown', event => {
    if( event.shiftKey === true && event.code === 'Space' ) {
      console.log( 'shift+space detected' )
    }
  })
}

To determine if the Shift key is being held when code is run:

window.onload = function() {
  const b = teeny.create()
  b.subscribe( 'run', (code, event) => {
    if( event.shiftKey === true ) {
      // run code in special way here
    }
  })
}

Keep in mind that handling key events across different operating systems, languages, and browsers is difficult and plan accordingly.

Config options

• el: The contenteditable <div> tag that will be used to present the editor. If no el is configured then teeny will use the first contenteditable div it finds on the page.
• value: A text string to use as the initial code in the editor.
• flashColor: A CSS string representing the color text should take when it "flashes" to indicate that it's being run.
• flashBackground: A CSS string representing of the background color text should take when it "flashes".
• flashTime: The number of milliseconds code is flashed when it is run.

This project is in its early early days, more docs / demos to come.