Add style to your pages.
Simply. Instantly.
Style your pages by writing directly in HTML.
Minimal configuration, no compilation.
Just CSS that works.
<button class="bg-[blue] c-[white] px-[2rem] py-[1rem] rounded-[10px]">
Click me
</button>
Click the button
to change the style
The code on the left — the result on the right. Exactly what you will see in production.
You write in HTML. Marsel does the rest.
No CSS file to create. No compilation. You add a class, the style appears.
2 files to manage, context to switch constantly.
.ma-carte {
padding: 20px;
border-radius: 12px;
background: white;
}
<!-- index.html -->
<div class="ma-carte">...</div>
Only one file. You write, you see. That's all.
<div class="
p-[20px]
rounded-[12px]
bg-[white]
">...</div>
Install Marsel
An npm command, then a few lines of JS initialization — and off you go.
Add classes
Directly in your HTML, as you would in CSS.
Marsl generates the CSS
Automatically, only for what you use.
The Tailwind spirit, the freedom of Runtime
No need to configure a tailwind.config.js file or run a watcher. With the components option, you create your own reusable utilities instantly. This is the power of atomic classes, plus the flexibility of JS.
// app.js
new Marssel({
components: {
'btn': 'px-[1.5rem] py-[0.75rem] rounded-[8px]',
'btn:hover': 'transform-[scale(1.05)]'
}
});
// Dans le HTML
<button class="btn">Cliquez</button>Isn’t that just inline CSS?
We are often asked this question. Here's why Marssel is a style engine, not a simple HTML crutch.
Responsive without limits
Inline CSS is unable to handle states (:hover, :focus) or moving screens. Marssel does it natively.
Cache Intelligence
Unlike inline which duplicates the weight, Marssel pools it. A class used 50 times = 1 single CSS rule.
JIT syntax
Forget endless configs. Hooks give you access to the entire CSS spectrum instantly.
Why Marsel?
We removed complexity to keep only creativity.
Legible
No more mysterious classes. p-[20px] does exactly what you think.
Fast
Generation on the fly. Only used classes are injected into the DOM.
Accurate
Native Components: Ready-to-use Modals, Toasts, Tooltips without additional JS.
Efficient
Intelligent cache + lazyload: instant styles on refresh, progressive loading.
Designed for the whole team
A common language that reconciles speed of learning and complex needs.
Beginners
Knowing CSS already means knowing Marsl. No new logic to absorb, just style to write where it is.
Developers
Maximum productivity. Manage your themes, reusable components, and animations without ever leaving your HTML file.
p-[20px] → padding: 20px
Teams
No more 'CSS Spaghetti'. Marssel imposes a natural and readable structure that any member can take control of.
Performance and lightness
Performance is not an option, it is our foundation. Marssel eliminates technical debt: no unused files, no compilation. Just an ultra-light engine optimized for raw speed.
15 +
Native components
< 50KB
Gzip
0
Dependencies
100%
Valid CSS
Ready to get started?
Join the developers who have chosen simplicity.
# Installation via npm
npm install @marssel-vb/marssel --save
# Ou avec yarn
yarn add @marssel-vb/marssel