10 ms·

Show HN: Boxwood – simple templating engine for JavaScript, in JavaScript

59 points by emilos 2y ago

Hey! A while back, I wrote a templating engine (MIT License), which I mostly use for small side projects, either static or ssr generated. Simplicity is one of the main goals. I'll be happy to answer any questions. The main goal for sharing it is to simply get some feedback. Best, Emil

martinbaun 2y ago
Sweet, I have been looking into Node for my Python SSR webapps, but Pug and Handlebars are just not cutting it. Jinja templating language is just soooo good. This looks like what I wanted in a templating language
- supriyo-biswas 2y ago
  There’s https://mozilla.github.io/nunjucks/ https://mozilla.github.io/nunjucks/ although it hasn’t been maintained for quite some time.
- lf-non 2y ago
  Try edge: https://edgejs.dev/ https://edgejs.dev/ It is mature and feature rich. I like that the expressions can be plain js and it is not coupled with html.
  - saurabh 2y ago
    We are using this as a standalone templating engine. It's easy, fast and has good error reporting. This is the main templating engine of AdonisJS.
- hombre_fatal 2y ago
  Fwiw, you can use JSX without React. Another project on the HN homepage at the moment happens to do this: https://www.val.town/v/maxm/staticChess https://www.val.town/v/maxm/staticChess const { renderToString } = require('react-dom/server') renderToString(<ul>{[1, 2, 3].map(n => <li>{n}</ul>)}</div>) Granted, you have to configure it so that JSX is allowed in your JS. For example, by running your code as `tsx server.js`, but I find it so much better than Pug/Nunjucks of yore that it makes up for that downside.
spirobelv2 2y ago
why not just use es6 template strings? (I do that for my framework mininext https://github.com/spirobel/mininext https://github.com/spirobel/mininext would be happy to receive feedback, other view points on this :-)
ricardobeat 2y ago
Curious about the motivation for this. It’s basically where we were at right before JSX took over, e.g. mercury [1] and the old hyperscript. Except it’s missing the ability to hydrate components on the client and re-render. [1] https://github.com/Raynos/mercury https://github.com/Raynos/mercury
- simonbarker87 2y ago
  Not the OP but I’m going to guess that, like me, they prefer to render server side where possible, don’t like Handlebars or Pug etc and don’t want to get lost in the quagmire than it NextJS. I use htmx for as much of my network requests and UI updating as possible as it’s faster to implement features, faster the render and easier to reason around than a SPA front end and JSON response backend - there’s a chance the OP is in a similar boat. The downside to a JS SSR driven app is the backend templating situation isn’t as expressive as JSX and can feel a bit limiting. Hopefully OP will chime in and correct of confirm my assumptions.
  - emilos 2y ago
    Correct, that's part of the reason. I've been wanting to move fast without having to worry about the little quirks of different templating languages, frameworks and just get the job done. I've been using it for small projects and I didn't want to be bothered with all of the setup required to get jsx/tsx transpilation in place. Another important reason was that I wanted a tool that would let me reach high results in lighthouse, and that's not something you'd get with other tools quickly. Critical css out of the box seemed to be approach that worked for me in this scenario.
    - deleted 2y ago
      [deleted]
    - WorldMaker 2y ago
      TSX doesn't need that much setup: a couple of tsconfig.json compiler options [0], a JSX function of the right shape, optionally a Fragment function of the right shape, and optionally a good definitions file. JSX in general is only a little bit more effort to support Babel's config file in addition to tsconfig.json. The shape of the JSX function (and Fragment function) is really simple. The type definitions you need to write can be complicated, which is why most of the big projects just copy and paste liberally from the massive (hand-maintained?) @types/react, but if a minimal definitions file is simpler than @types/react looks and I've proven that you can meta-type from the lib.dom.ts types to something quite useful instead of hand-maintaining types, in just a few lines of Typescript. [1] [2] (Butterfloat is my low dependency RxJS Observable-powered, non-Virtual DOM TSX-based view engine. Snabbdom is a low dependency Virtual DOM.) [0] I documented the compiler options and the reasoning behind them in if you expand the Explanations section of this Getting Started document: https://worldmaker.net/butterfloat/#/getting-started https://worldmaker.net/butterfloat/#/getting-started [1] https://github.com/WorldMaker/butterfloat/blob/main/jsx.ts https://github.com/WorldMaker/butterfloat/blob/main/jsx.ts [2] https://github.com/snabbdom/snabbdom/blob/master/src/jsx.ts https://github.com/snabbdom/snabbdom/blob/master/src/jsx.ts
evbogue 2y ago
Reminds me a little of https://github.com/ohanhi/hyperscript-helpers https://github.com/ohanhi/hyperscript-helpers Could this also work in the browser?
- emilos 2y ago
  You could get a simple version with little modifications, but it wouldn't really be super useful unless you potentially start adding things like lifecycle events (like mount, unmount), reactivity (state, effects). Otherwise you might end up reimplementing those. The intentions of the tool were the server side and static use cases and I didn't plan to use it on the client side.
deleted 2y ago
[deleted]
MatthiasPortzel 2y ago
If I understand this correctly, it seems similar to one use-case for NanoJSX.
javajosh 2y ago
I don't really need a library like this, but I want to comment to say how much I like the way you made it. Very minimal in itself and also in its dependencies. Very clear documentation in the readme. I wish more libraries and tools were distributed like this.
jesperancinha 2y ago
[flagged]
neverokay 2y ago
JSX kind of won, no?
zeroq 2y ago
Reminds me of Smarty, a famous templating language written in templating language.
wetpaws 2y ago
[dead]
seer 2y ago
I wonder if it has an intermediary step that concerts the template to AST? I like my tools to have as much types generated from context as possible (types from OpenApi, from graphql or from sql queries) and was looking to build a tool like that for handlebars. Idea being that it would tell you which types the template variables used so you could avoid stupid errors at compile time. It seamed handlebars could provide an AST, but it was kinda hard to used so I scrapped the effort. Maybe this would be more condusive?
- emilos 2y ago
  Having a type system wasn't really the goal here (there's enough great tools that handle that), but there's plenty of options that could work for you, if you're willing to build it. Some quick ideas: 1. You could add a jsdoc comment per component, let your tool read it and treat it as the source of truth 2. The template is just a js file, so you could parse it, get the params of the fn and try to deduce the types based on the usage 3. You could use typescript and export types 4. Serialize/normalize data before passing to the templating engine

59 points by emilos 2y ago

martinbaun 2y ago

Sweet, I have been looking into Node for my Python SSR webapps, but Pug and Handlebars are just not cutting it. Jinja templating language is just soooo good. This looks like what I wanted in a templating language

supriyo-biswas 2y ago
There’s https://mozilla.github.io/nunjucks/ https://mozilla.github.io/nunjucks/ although it hasn’t been maintained for quite some time.
lf-non 2y ago
Try edge: https://edgejs.dev/ https://edgejs.dev/ It is mature and feature rich. I like that the expressions can be plain js and it is not coupled with html.
- saurabh 2y ago
  We are using this as a standalone templating engine. It's easy, fast and has good error reporting. This is the main templating engine of AdonisJS.
hombre_fatal 2y ago
Fwiw, you can use JSX without React. Another project on the HN homepage at the moment happens to do this: https://www.val.town/v/maxm/staticChess https://www.val.town/v/maxm/staticChess const { renderToString } = require('react-dom/server') renderToString(<ul>{[1, 2, 3].map(n => <li>{n}</ul>)}</div>) Granted, you have to configure it so that JSX is allowed in your JS. For example, by running your code as `tsx server.js`, but I find it so much better than Pug/Nunjucks of yore that it makes up for that downside.

spirobelv2 2y ago

why not just use es6 template strings? (I do that for my framework mininext https://github.com/spirobel/mininext https://github.com/spirobel/mininext would be happy to receive feedback, other view points on this :-)

ricardobeat 2y ago

Curious about the motivation for this. It’s basically where we were at right before JSX took over, e.g. mercury [1] and the old hyperscript. Except it’s missing the ability to hydrate components on the client and re-render. [1] https://github.com/Raynos/mercury https://github.com/Raynos/mercury

simonbarker87 2y ago
Not the OP but I’m going to guess that, like me, they prefer to render server side where possible, don’t like Handlebars or Pug etc and don’t want to get lost in the quagmire than it NextJS. I use htmx for as much of my network requests and UI updating as possible as it’s faster to implement features, faster the render and easier to reason around than a SPA front end and JSON response backend - there’s a chance the OP is in a similar boat. The downside to a JS SSR driven app is the backend templating situation isn’t as expressive as JSX and can feel a bit limiting. Hopefully OP will chime in and correct of confirm my assumptions.
- emilos 2y ago
  Correct, that's part of the reason. I've been wanting to move fast without having to worry about the little quirks of different templating languages, frameworks and just get the job done. I've been using it for small projects and I didn't want to be bothered with all of the setup required to get jsx/tsx transpilation in place. Another important reason was that I wanted a tool that would let me reach high results in lighthouse, and that's not something you'd get with other tools quickly. Critical css out of the box seemed to be approach that worked for me in this scenario.
  - deleted 2y ago
    [deleted]
  - WorldMaker 2y ago
    TSX doesn't need that much setup: a couple of tsconfig.json compiler options [0], a JSX function of the right shape, optionally a Fragment function of the right shape, and optionally a good definitions file. JSX in general is only a little bit more effort to support Babel's config file in addition to tsconfig.json. The shape of the JSX function (and Fragment function) is really simple. The type definitions you need to write can be complicated, which is why most of the big projects just copy and paste liberally from the massive (hand-maintained?) @types/react, but if a minimal definitions file is simpler than @types/react looks and I've proven that you can meta-type from the lib.dom.ts types to something quite useful instead of hand-maintaining types, in just a few lines of Typescript. [1] [2] (Butterfloat is my low dependency RxJS Observable-powered, non-Virtual DOM TSX-based view engine. Snabbdom is a low dependency Virtual DOM.) [0] I documented the compiler options and the reasoning behind them in if you expand the Explanations section of this Getting Started document: https://worldmaker.net/butterfloat/#/getting-started https://worldmaker.net/butterfloat/#/getting-started [1] https://github.com/WorldMaker/butterfloat/blob/main/jsx.ts https://github.com/WorldMaker/butterfloat/blob/main/jsx.ts [2] https://github.com/snabbdom/snabbdom/blob/master/src/jsx.ts https://github.com/snabbdom/snabbdom/blob/master/src/jsx.ts

evbogue 2y ago

Reminds me a little of https://github.com/ohanhi/hyperscript-helpers https://github.com/ohanhi/hyperscript-helpers Could this also work in the browser?

emilos 2y ago
You could get a simple version with little modifications, but it wouldn't really be super useful unless you potentially start adding things like lifecycle events (like mount, unmount), reactivity (state, effects). Otherwise you might end up reimplementing those. The intentions of the tool were the server side and static use cases and I didn't plan to use it on the client side.

deleted 2y ago

[deleted]

MatthiasPortzel 2y ago

If I understand this correctly, it seems similar to one use-case for NanoJSX.

javajosh 2y ago

I don't really need a library like this, but I want to comment to say how much I like the way you made it. Very minimal in itself and also in its dependencies. Very clear documentation in the readme. I wish more libraries and tools were distributed like this.

jesperancinha 2y ago

[flagged]

neverokay 2y ago

JSX kind of won, no?

zeroq 2y ago

Reminds me of Smarty, a famous templating language written in templating language.

wetpaws 2y ago

[dead]

seer 2y ago

I wonder if it has an intermediary step that concerts the template to AST? I like my tools to have as much types generated from context as possible (types from OpenApi, from graphql or from sql queries) and was looking to build a tool like that for handlebars. Idea being that it would tell you which types the template variables used so you could avoid stupid errors at compile time. It seamed handlebars could provide an AST, but it was kinda hard to used so I scrapped the effort. Maybe this would be more condusive?

emilos 2y ago
Having a type system wasn't really the goal here (there's enough great tools that handle that), but there's plenty of options that could work for you, if you're willing to build it. Some quick ideas: 1. You could add a jsdoc comment per component, let your tool read it and treat it as the source of truth 2. The template is just a js file, so you could parse it, get the params of the fn and try to deduce the types based on the usage 3. You could use typescript and export types 4. Serialize/normalize data before passing to the templating engine