re
ty
Live coding without the stress
Usage
API
FAQ
Actions
GitHub
Demo
button { border: .1em solid black; background: transparent; color: black; } button:hover { background: black; color: white; } button.pink { border-color: #f06; color: #f06; } button.pink:hover { background: #f06; color: white; }
Click me
Click me
[ {"type":"caret","start":63,"end":63,"editor":"css"}, {"type":"insertText","text":"--","split":true}, {"type":"caret","start":78,"end":78}, {"type":"insertText","text":"\n\tcolor: var()","split":true}, {"type":"caret","start":91,"end":91}, {"type":"insertText","text":"--color","split":true}, {"type":"caret","start":99,"end":99}, ";", {"type":"pause","delay":2680}, {"type":"caret","start":29,"end":34}, {"type":"insertText","text":"var","split":true}, "()", {"type":"caret","start":33,"end":33}, {"type":"insertText","text":"--color","split":true}, {"type":"caret","start":139,"end":144}, {"type":"insertText","text":"var","split":true}, "()", {"type":"caret","start":143,"end":143}, {"type":"insertText","text":"--color","split":true}, {"type":"pause","delay":2461}, {"type":"caret","start":207,"end":207}, {"type":"insertText","text":"--","split":true}, {"type":"caret","start":186,"end":207}, {"type":"deleteContentBackward"}, {"type":"pause","delay":2174}, {"type":"caret","start":203,"end":259}, {"type":"pause","delay":2998}, {"type":"deleteContentBackward"}, {"type":"deleteContentBackward"}, {"type":"pause","delay":5000}, {"type":"caret","start":64,"end":64,"editor":"html"}, "\n", "
Click me
", {"type":"caret","start":72,"end":72}, {"type":"insertText","text":" style=","split":true}, "\"\"", {"type":"caret","start":80,"end":80}, {"type":"insertText","text":"--color: blue","split":true} ]
Real-time recording demo
Make some edits here:
* { color: red; }
Click me
Click me
Observe them being replayed here: