What does HackerNews think of htm?

Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

Language: JavaScript

#1 in Babel
I thought the same thing, but apparently "HTM" is a JSX like javascript string template representation of HTML, and it can be found here: https://github.com/developit/htm -- it is used by rehtm, which is the OP. It's a confusing collection of names at first sight.
They are many libraries that use tagged template string to allow this, the most interesting to my eyes is the one made by preact dev. It's just named htm [0], it's made by preact but it can totally be used with react.

The most interesting thing of this one is that uses no custom syntax for js variable, so @attribute something when you must pass an object as props.

0. https://github.com/developit/htm

If you like React but also don't want a build step, take a look at Preact (only 3kb gzipped) + HTM, their alternative to JSX that uses tagged template literals, so it works in the browser (but also can be compiled away in a build step)

https://preactjs.com/guide/v10/getting-started#alternatives-...

https://github.com/developit/htm

This seems like a case of caring way too much about something that's hardly very different. JSX versus tagged template strings can be incredibly similar to one another.

The examples in this article are using vanilla template strings to author raw html, but that only misses a couple of nicities JSX has. There are tagged template string libraries like htm[1] that do include some of the few nicities JSX has, but which are actually compatible with the official language.

[1] https://github.com/developit/htm

I am using Tauri + Preact [0] for a private project. It's wonderful. With Preact + htm [1], I can have a really complex UI, that still feels snappy, without having to deal with webpack or any other build pipeline (after all, it is a hobby project and therefore should spark joy).

The backend is entirely written in Rust.

I did some electron apps before, and I have to say, Tauri really feels snappier.

[0] https://preactjs.com/

[1] https://github.com/developit/htm

> I think we often blame React for seemingly arbitrary rules, like how components must return a single top-level element. But more often than not, React is just warning us about a JavaScript limitation.

Really? With lit you can create a component that has several top-level elements[1].

EDIT: In fact this works even in react/preact with htm[2], so it's just a limitation of JSX.

[1]: https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1n...

[2]: https://github.com/developit/htm

Preact [0] + htm [1]

Why? Preact is small, fast, and reasonably easy to use. But the main selling point for me was that, together with htm, I don't need any build system a la webpack. No node_modules folder. I just have to load one script (preact + htm bundled), define my components in plain javascript files and import them. Bliss for me.

[0] https://preactjs.com/

[1] https://github.com/developit/htm

Edit: Just read that you want drag & drop style UI building, so this might not be for you.

Just to add on here, the Preact author made a generalized utility for tagged template => vnode conversions: https://github.com/developit/htm
Instead of JSX I’ve been using htm, which fulfills roughly the same role but runs entirely in the browser: https://github.com/developit/htm

I find typescript useful for libraries, less so for application code.

Yeah, it's a mess. Learn CSS. For real. Use the cascade, it's there for a reason. CSS has variables and animations and can even do interactivity. Vanilla JS will take you far if you learn it thoroughly. (MDN[0] is your friend) ES Modules exist and work natively in the browser. Use them to organize your code. React is crazy popular, learning it is good to have it on your résumé if nothing else, but it needs huge and slow dev tooling. If you want a framework, use Preact[1] (React but tiny, if you use it with htm[2] you won't need a build step) or Svelte[3]. Babel isn't needed unless you are targeting old browsers, and even if you are Closure Compiler[4] works better.

[0]: https://developer.mozilla.org/

[1]: https://preactjs.com/

[2]: https://github.com/developit/htm

[3]: https://svelte.dev/

[4]: https://developers.google.com/closure/compiler/

I started using ficusjs for some experiments [2]. I built a signature button for Metamask [1].

What's great is that:

- I use preact's htm as a renderer [3], which is JSX but as template strings.

- The API is like (p)react but a bit more generalized. I like it.

- The web component concept is great. Especially for mixing server-side rendering and JavaScript-powered components.

That last one IMO is web components killer feature. I can now wrote a mini component and then I tugg it in with the other 99% of my page that is rendered server side.

It means, I'm able to serve my users quickly. I have SEO'd everything too. Cool!

-1: https://github.com/TimDaub/web3-sign-msg

- 2: https://docs.ficusjs.org/

-3: https://github.com/developit/htm

You may be interested in doing js template strings with preact/react - no build tools required! Btw there's vscode support for this so you get syntax hilight too

https://github.com/developit/htm

> Long story short have been looking into standard web components for my next side project and FicusJS seems to check all the boxes.

Could you please list the boxes that you were ticking?

For example, how many boxes would the following tick:

    - Preact with htm (tiny, looks very similar to ficus) [0]
    - LitElement (tiny, very close to native web components) [1]
    - Svelte (the darling of many since recently) [2]

[0] - https://github.com/developit/htm

[1] - https://lit-element.polymer-project.org/

[2] - https://svelte.dev/

Here I am again. Stop using JSX and start embracing Javascript's template strings. They're awesome!

https://github.com/developit/htm

I've been using preact with parcel for over half a year now and it has been a blast!

It seems to be 100% compatible with React. It's fast, it's small. And with preact/compat you can use any third party react component.

I'm a particular fan of https://github.com/developit/htm, which is an alternative to JSX that simply uses JS template strings and needs no preprocessor.

I use htm (Hyperscript Tagged Markup) instead of JSX and I love it. It's just plain JS and works extremely similar to JSX: https://github.com/developit/htm
React can be added to a page with just a script tag in the same way as Vue:

https://reactjs.org/docs/add-react-to-a-website.html

Having said that, React is normally used with JSX syntax, which requires a compile step.

You _can_ use it with "raw" `React.createElement()` calls, but that's generally unwieldy and almost no one does that.

However, there's a very neat library called https://github.com/developit/htm , which is an almost-JSX-compatible syntax that uses JS template literal strings, and requires no compile step.

There's nothing wrong with Vanilla JS and jQuery, but if you need more interactivity, it's possible to use modern libraries like React (with htm [1]) or Vue without a compilation step, all with zero dependencies. The size of the libraries is only 10k to 20k bigger than jQuery.

If you need even less bytes, then Preact is also an option (also with htm [1]), and it clocks at around 3k + 400 bytes for htm.

If you're only targeting modern browsers with ES6 support you can even use `import from` statements.

[1] https://github.com/developit/htm

htm [1], mentioned in the paragraph that you linked, is a very clever alternative, similar to jsx but in pure javascript

[1] https://github.com/developit/htm

ah, and the article also mentioned https://github.com/developit/htm which pretty much provides what JSX does, just in a lot less complex way (at the cost of a little run-time)
> I suppose I could rephrase my question to something like "What is the point of this library?"

It's just a lightweight, no-build-steps-required library that's similar to React. If you already like using React there's nothing much compelling to make you switch.

I like using it with HTM for a nice alternative to JSX which doesn't need any build steps.

I can't speak on its interaction with TypeScript, I've only used this for simple pages where I want to add some interactivity without involving the rest of the nightmarish JS ecosystem.

https://github.com/developit/htm

I can't count the number of times I had to write a HTML template for a small component with just jQuery and it was horrible every single time. Something like htm+preact [0] would clearly do the job much better and only add 5kB of Javascript to your site instead of leaving an unmaintainable mess.

[0] https://github.com/developit/htm

I really like Developit's (makers of Preact) JSX alternative 'htm'[1] which was inspired by lit-html[2]. It uses tagged template literals so you can run them in the browser during development without needing to compile to hyperscript first (but you should compile during production builds)

1. https://github.com/developit/htm

2. https://lit-html.polymer-project.org/guide

Lit is excellent.

It's also possible to use htm with Preact for developing without a bundler if your target users support ES6.

https://github.com/developit/htm

TL;DR: the idea is basically to write the Django data from the DB into a JS object and then use that to feed Vue components. I imagine they do this only for the stuff that uses Vue and not the whole page markup.

Vue is a great option to combine with server rendered markup (PHP, Python, etc) because it can read the templates directly from the DOM and doesn't need a build step like JSX does.

It's not the only option though. You could also use Preact + Htm (JSX in string templates) which doesn't need a build step either and is much smaller than Vue.

https://github.com/developit/htm

If you really want to remove the compilation step you can use htm (also originally by the same author of the blog and Preact): https://github.com/developit/htm
Original author here.

I don't think nesting is possible in the examples in that post. I'm sure there's some way to get it working that I just haven't figured out yet. Maybe you could replace the default template strings with something using tagged template literals (like https://github.com/developit/htm).

You can work around nesting by spinning up new components after the innerHTML assignment, and assigning them with IDs. Here's an example where I've done that:

https://github.com/bryanbraun/music-box-fun/blob/dc899c14adc...

Edit: typos

Thanks for the link.

By the way I just noticed you're the maintainer of lit-html. How does it compare to HTM[1]? They both look like they accomplish the same goal but HTM's implementation looks smaller.

[1] https://github.com/developit/htm

yup, just add the script tag and you're good to go! It's frequently used along with https://github.com/developit/htm for a jsx-less template syntax. No build tools required :)
Jason Miller's `htm` library is a great alternative: nearly-JSX syntax via template strings, with no compilation needed:

https://github.com/developit/htm

As I wrote up-thread, Jason Miller's `htm` library seems to be a very nice alternative to JSX that does not require a build step:

https://github.com/developit/htm

There's a number of options available if you don't want to use JSX.

For example, if you prefer to use small wrapper functions like `h(MyComponent)` and `div()`, there's `react-hyperscript-helpers` [0].

More recently, Jason Miller published `htm` [1], which provides near-JSX syntax using ES6 template literals, and no build step required. It appears to be a very viable alternative to JSX in many ways.

[0] https://github.com/jador/react-hyperscript-helpers

[1] https://github.com/developit/htm

It's not much of a difference, but take a look at the htm package.

It uses template strings instead of requiring a parser, turning your example into something more like:

    return htm``;

https://github.com/developit/htm