pen
.ylo.one
⌨
Format
▢
Layout
⬇
Editor on top, preview below
⬆
Preview on top, editor below
➡
Editor left, preview right
⬅
Preview left, editor right
▤
Editor only
▥
Preview only
⚙
Settings
▶
Run
💾
Save
+
New
Log in
Sign up
Sign up
×
Username
Email
Password
Have an account? Log in
Cancel
Create account
Continue with GitHub
HTML
CSS
JS
Result
HTML
Markdown
Pug
Tidy
<div class="hello"> <h1>Hello, world.</h1> <p>Edit the panes — preview updates live.</p> <button id="say-hi">Say hi</button> </div>
CSS
SCSS
Less
Stylus
Tidy
body { background: linear-gradient(135deg, #1a1c20, #131417); color: #e4e4e7; font-family: system-ui, sans-serif; min-height: 100vh; display: grid; place-items: center; margin: 0; } .hello { text-align: center; padding: 40px; } h1 { font-size: 48px; margin: 0 0 8px; background: linear-gradient(90deg, #82d8ff, #c084fc); -webkit-background-clip: text; color: transparent; } p { color: #a1a1aa; margin: 0 0 24px; } button { background: #2563eb; color: #fff; border: 0; padding: 10px 24px; border-radius: 8px; font-size: 15px; cursor: pointer; transition: transform .15s; } button:hover { transform: translateY(-1px); }
JS
Babel (JSX)
TypeScript
CoffeeScript
Tidy
document.getElementById('say-hi').addEventListener('click', () => { console.log('hi from the console!'); alert('hi!'); });
Preview
Console
Clear
Full
Console output will appear here.
Pen settings
×
Title
Description
Tags
(comma-separated)
Layout
Editor on top, preview below
Preview on top, editor below
Editor left, preview right
Preview left, editor right
Editor only
Preview only
External CSS resources
+ Add CSS resource
External JS resources
+ Add JS resource
Cancel
Save settings
Popular pens
Most loved on the playground.
My first pen
by
rehmat
♥ 1
👁 6
Recent pens
SCSS test
by
rehmat
♥ 0
👁 11
My first pen
by
rehmat
♥ 1
👁 6