Kinda like Vue, but written in XSLT
With Xsalt, you can define Vue-like components to transform XML/XHTML/RSS into HTML.
Xsalt doesn't require complex tooling like Webpack or Vite; a simple PHP script is sufficient for rendering/building web pages. XSLT is also natively understood by browsers, allowing components to be transformed on the fly without the need for build tools.
I use Xsalt for creating static minisites.
index.xhtml:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="./includes.xsl" ?>
<html>
<head />
<body>
<hello-world />
</body>
</html>
includes.xsl:
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:include href="./../../src/xsalt.xsl"/>
<xsl:include href="./components/hello-world.html"/>
</xsl:transform>
hello-world.html:
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="hello-world" mode="x-component">
<template>
<h1 class="title">Hello world</h1>
</template>
<style>
.title {
color: blue;
}
</style>
</xsl:template>
</xsl:transform>
result:
<!DOCTYPE html>
<html>
<head>
<style>.title { color: blue; }</style>
</head>
<body>
<h1 class="title">Hello world</h1>
</body>
</html>
See live XSLT demo or static build demo
- The basics: The example you've just read, explained.
- Single-File Components: Inspired by Vue's
template
,script
andstyle
tags. - Slots: Default and named slots.
- Auto BEM: BEM-like classes automatically added by xsalt.
- Auto select: Easy JS nodes auto-selection.
- X-store: Global data store.
- Custom elements: Live custom elements from Xsalt components.
- petite-vue integration: Use petite-vue in Xsalt components.
- petite-vue components: petite-vue components integration.
- Xsalt.php: A simple PHP class to render or build a page.
git submodule add https://github.com/francescozaniol/xsalt
To update to latest version:
git submodule update --remote --reference https://github.com/francescozaniol/xsalt
Or simply download /src/xsalt.xsl