mixhtml

Download mixhtml

tldr;

mixhtml enables the creation of single-page applications for both small and large projects by simply adding a few tags to DOM elements. No virtual DOM, no compilation, just simplicity and ease of use.

What is mixhtml ?

mixhtml flips everything you know about front-end frameworks and libraries on its head.

Unlike traditional architectures, mixhtml is built for server-side rendering, sending dynamic content directly to the client via simple fetch requests.

Take a moment to look at this page—it's a full-fledged Single Page Application (SPA), entirely powered by mixhtml . And guess what? It just works.

Prepare to be amazed! mixhtml doesn’t rely on a virtual DOM, npm, or Node.js. There's no need for precompiled code. Everything runs directly through the native DOM, making it simple yet powerful.

And the speed? Lightning-fast. mixhtml isn’t held back by bloated frameworks. The only thing that might limit performance is the browser itself—just like with any other library. But thanks to its built-in garbage control, mixhtml can easily scale to handle the largest applications, and the library will take care of the rest.

Garbage control

With mixhtml, you can easily create true Single Page Apps (SPAs). Each page can be assigned a Time-To-Live (TTL), which determines how long it stays in the browser after being loaded. This feature is especially useful for pages that need to expire after a certain period.

Creating SPAs with mixhtml is simple—just add a few tags to your DOM elements. There's no virtual DOM, no compilation step, and no unnecessary complexity.

To get started, here are the tags you need to use to create your Single Page App:

id="index" unique page identifier
class="page" shared class for all pages
mix-top="body" position the page at the top of the body
mix-ttl="5000" page expires in 5 seconds. Avoid this attribute and the page never expires
mix-url="/" The URL of the page
mix-hide=".page" Hide all pages with this class
mix-show="#index" Show the page with this id
mix-title="Company" Set the title of the page

Version 1.0

Better and easier than ever.

Just look at this request:

<form mix-post="items">

That is correct. With just that mix-post you have converted your old app into a modern single page app.

Scroll memory

Each page in a single-page app built with mixhtml retains its own scroll position. This means that when a user navigates between pages, mixhtml remembers the scroll position for each one. As a result, users can easily move back and forth between pages without losing their position in which it was left.

On this website, you can switch between the pages listed in the navigation bar. Scroll each page to any position, then navigate back and forth between the pages. You'll notice that the scrollbar remembers the position for each page, ensuring a smooth and seamless browsing experience.

Safe and secure

Since the response is generated on the server and mixhtml renders the HTML in the browser, its security depends on the data the server sends. Therefore, if the server properly sanitizes and validates the data, mixhtml can be considered 100% safe to use.

Contact us

hi@mixhtml.com