🚀 Simple express.js tool to evaluate expressions in HTML templates.
🚀 Simple HTML templating for expressjs.
npm install expandify
First create a HTML file that will serve as your template (index.html).
<!DOCTYPE html>
<html>
<body>
<h1>Hey expandify templates!</h1>
</body>
</html>
Then create a express application with expandify (index.js).
npm i express
const expandify = require("expandify");
const express = require("express");
const path = require("path");
const app = express();
app.get("/", (req, res) => {
res.send(expandify(path.join(__dirname, "index.html")));
});
app.listen(8080);
The expandify function takes the path to your template, and returns a string as your compiled template. You can use the res.send() function to display the compiled template's HTML.
Once you run node index.js, head to localhost:8080 and you will see Hey expandify templates! on the screen!
You can embed any values or expressions into your templates:
<!DOCTYPE html>
<html>
<body>
<h1>1+1 is equal to {{1+1}}</h1>
</body>
</html>
You can also embed variables from your javascript code:
<!DOCTYPE html>
<html>
<body>
<h1>Hey {{name}}</h1>
<p>{{greeting}}</p>
</body>
</html>
Then, when you call expandify() pass the variables like this:
expandify(__dirname + "/index.html", { name: "Bob", greeting: "How's life!" });
You can embed lists (which will be joined), or map through them. This must stay on one line:
<!DOCTYPE html>
<html>
<body>
<ul>
{todos.map(todo => `<li>${todo}</li>`)}
</ul>
</body>
</html>
expandify(__dirname + "/index.html", { todos: ["Do chores", "Do homework"] });
Or embed JSON, which will be stringified for you:
<!DOCTYPE html>
<html>
<body>
<h1>My cool JSON</h1>
{{{key: "value"}}}
</body>
</html>
You can bind an expression to any attribute with the bind:attribute directive:
<!DOCTYPE html>
<html>
<body>
<input type="number" bind:value="1+1" />
</body>
</html>
Or bind an attribute to a variable passed in through your javascript code:
<!DOCTYPE html>
<html>
<body>
<input type="text" bind:placeholder="myPlaceholder" />
</body>
</html>
expandify(__dirname + "/index.html", { myPlaceholder: "Hey!" });
A shortcut for binding a variable to a attribute with the same name is bind:attribute: :
<!DOCTYPE html>
<html>
<body>
<input type="text" bind:placeholder: />
</body>
</html>
expandify(__dirname + "/index.html", { placeholder: "Hey!" });
To write embedded styles with scss, use the <style lang="scss"> tag:
<!DOCTYPE html>
<html>
<head>
<style lang="scss">
$size: 10rem;
body {
font-size: $size;
}
</style>
</head>
<body>
Large text!
</body>
</html>
You dont have to do anything else, expandify will automatically compile the scss for you!
expandify is MIT-licensed open-source software created by Bharadwaj Duggaraju.
FAQs
🚀 Simple HTML templating for expressjs.
The npm package expandify receives a total of 0 weekly downloads. As such, expandify popularity was classified as not popular.
We found that expandify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.