Marko

@markojs.com

800 Followers 12 Following

✨ HTML Reimagined 🔬 Fine-grained Bundling 🚿 Streaming Render 🛠️ Targeted Compilation @ebay.com & @openjsf.org

A code block from the website: ``` tags/ menu-button.marko icons/ icon-chevron.marko icon-plus.marko ```
A code screenshot from the lazy loading documentation ``` import VideoPlayer from "<video-player>" with { load: "visible#hero" } <section#hero> <VideoPlayer src=input.src/> </section> ```
A code block from the Marko website: ``` <input type="number" value:parseFloat:=num> // desugars to <input type="number" value=num valueChange(newValue) { num = parseFloat(newValue) } > ```
The Marko and UnoCSS logos, some Marko mascots, and a button HTML element with a HUGE list of classnames that goes off the page
Meme suggesting breaking up an app into islands for better performance, but then highlighting that Marko 6 does this automatically.
A screenshot of the Marko HackerNews website with the Chromium network tab open. A hand-drawn arrow and circle highlight that only 1.7kb of JavaScript is sent to the browser
The table from the linked article, with highlights indicating that Marko is on the top of the charts and is 6.36x smaller than Next.js
The output of the code example linked, showing a variety of inputs masked to prevent letters, cast to capital letters, and format as credit card/hex/phone number
A demonstration of the attached code example, where radio an "Are you sure?" prompt is shown after every radio button click.
An animation from SolidJS code to Marko code for a counter component, demonstrating that Marko is about 1/3 the number of characters.
A TODO app example using Marko's concise syntax: ```marko let/todos=["foo", "bar"] form onSubmit(e) { e.preventDefault() todos = todos.concat(e.target.todo.value) e.target.reset() } input name="todo" button -- Add ul for|todo, i| of=todos li button onClick() { todos = todos.toSpliced(i, 1) } -- &times; -- ${todo} ```