edit and run typescript in browser with direct output
🚨 can only be used in browsers with es module support 🚨
- monaco editor
- typescript intellisense
- typescript type checking
- react support
- import es modules with types
- direct output for every statement
- any js value
- await promises and display result | error
- render react element with styles
- runs directly in browser
- works on mobile
- typescript in browser with monaco editor
- surround statements with log function
- resizable layout
- log promise
- log react component
- import in browser
- preload imports
- show strg+s as button
- save local
- editable theme
- mobile support
- multiple logs per line
- multiple files
- import non es modules in browser
- plugin system
import React from 'react';
import * as R from 'ramda';
// can render react component with style
<h1 style={{ color: '#fff' }}>Hello World</h1>;
// ! don't log output
!"not logged"
const wait = (mil: number, value: any, error?: any) => new Promise((reolve, reject) => {
!setTimeout(() => {
if (error) reject(new Error(error));
else reolve(value);
}, mil);
});
// can await promises
wait(1000, 'resolved');
// can await promises and show error
wait(1000, null, 'rejected');
// can render any value
const val = {
name: "max",
age: 34,
}
val;
// can render colors
'#123456'
const numbers = ['1', '2', '3', '4', '#', 'a', '5', '6', '7', '8', '9', '0', 'z'];
// can import and use es-modules
// modules and types are loaded from https://unpkg.com
R.pipe(
R.map<string, number | string>(R.when(v => v === '#', v => v.charCodeAt(0))),
R.filter(v => !isNaN(+v)),
R.map(a => +a),
R.sum
)(numbers)
`