bitty is a code editor specifically developed for live coding performance. The design goals are:
<script> tagThe default keybindings are:
Ctrl+Enter: Run (and flash) single line at current cursor locationAlt+Enter: Run (and flash) block surrounding current cursor location. Blocks are delimited by blank lines (including spaces).bitty tries to be as flexible as possible in enabling you to decide what parts of your syntax should be highlighted and how. bitty.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; }
bitty.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-colorcolorcaret-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 bitty.rules. If you’re not comfortable using regular expressions, here is a great playground to explore.
Call bitty.create(), maybe with some config options, to return a new bitty 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( 'bitty' )`
window.onload = function() {
const b = bitty.create({
flashColor:'red',
flashTime: 100,
value: initialCode
})
// just eval the code that is passed to the callback
b.subscribe( 'run', eval )
}
There are several events you can register for. The syntax for registering for events takes the form bittyinstance.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 = bitty.create()
b.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 = bitty.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.
contenteditable <div> tag that will be used to present the editor. If no el is configured then bitty will use the first contenteditable div it finds on the page.This project is in its early early days, more docs / demos to come.