Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
appsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
-
-
-
htm
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
-
-
-
-
JsonApiDotNetCore
A framework for building JSON:API compliant REST APIs using ASP.NET and Entity Framework Core.
-
TypeORM
ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.
-
-
-
-
-
-
-
elderjs
Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.
-
-
-
ToolJet
Low-code platform for building business applications. Connect to databases, cloud storages, GraphQL, API endpoints, Airtable, Google sheets, OpenAI, etc and build apps using drag and drop application builder. Built using JavaScript/TypeScript. 🚀
-
-
Forest Admin
💎 Ruby on Rails agent for Forest Admin to integrate directly to your existing Ruby on Rails backend application.
-
-
-
-
-
react-control-chaos
Demonstration of multiple controls displaying and manipulating the same application state.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node.
Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a tag in your HTML document. If you'd like to try something similar to this "Tailwind" hotness everyone keeps talking about, try Basscss[2]. Again, no tooling, just need a tag.
Once you start needing to add interactivity to your site, htmx[3] is nice and decently simple. If you really want something React-like, Mithril.js[4] is very similar but much simpler.
[1] https://www.cssbed.com/
[2] https://basscss.com/
[3] https://htmx.org/
[4] https://mithril.js.org/
https://svelte.dev/tutorial/basics - easy to get started with but really powerful for complex stuff too
For layout, don't use any CSS framework, but instead refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ often - every time I use some big CSS framework I end up fighting it at some point.
https://vitejs.dev/ for packaging - I got really grumpy when frontend stuff started needing build and packaging tools, but it's the nature of things so you just have to deal with it, and vite is fast, not overly complicated, and supports fast hot reloading.
Honestly? React [0], Tailwind [1] and Vite [2]. Using Vite so setup the environment and tailwind components for css I have never been able to create front end faster than now. It feels like a super power.
[0] https://reactjs.org/
[1] https://tailwindcss.com/
[2] https://vitejs.dev/
For those recommending Tailwind, it's huge if you're using it from the CDN (318K uncompressed).
Other tools (except for Tachyons, these are maybe out of scope for a home lab):
- Tachyons [0] is a small (16K-ish) utility class framework.
- DaisyUI [1] is a free and open source component lib for Tailwind.
- WindiCSS [2] is built on Tailwind with some additional features.
- UnoCSS [3], an interesting on-demand atomic CSS engine that supports Tailwind CSS, WindiCSS, Bootstrap, and Tachyons.
[0]: https://tachyons.io/
[1]: https://daisyui.com/
[2]: https://windicss.org/guide/
[3]: https://github.com/unocss/unocss
Man, given all the comments suggesting frameworks that will require you to do html/css/js it seems like no one has really read your comment.
For your use case I would look at [AppSmith](https://github.com/appsmithorg/appsmith) or [ToolJet](https://github.com/ToolJet/ToolJet).
These are full-stack low-code frameworks, but it's easy to use them to do just the frontend and connect to a backend API you implement yourself separately.
Honestly? React [0], Tailwind [1] and Vite [2]. Using Vite so setup the environment and tailwind components for css I have never been able to create front end faster than now. It feels like a super power.
[0] https://reactjs.org/
[1] https://tailwindcss.com/
[2] https://vitejs.dev/
I often use plain HTML and a classless CSS (e.g. Water.css[0]) for personal projects.
This way it's easy to write and maintain. Looks okay. Fast feedback cycle during development. No need for build steps. Works in browsers without JavaScript. Works well on desktop and mobile devices.
Highly recommended if suits your needs.
[0]: https://watercss.kognise.dev/
If you need any kind of interactivity on the frontend, but are more comfortable with the backend, I would suggest looking at Phoenix LiveView [0] or a similar server-rendered HTML technology for your language of your choice [1].
In short, these solutions take JavaScript out of the mix entirely and basically let you deal with a single logical "app", rather than a separate frontend & backend.
[0] https://github.com/phoenixframework/phoenix_live_view
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, which can be used instead of jsx, 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/
Typically use open-wc[2] to have a starting template under a minute.
Then I use any of the front-end libraries that add bells and whistles. Vaadin coming on top [3]
I'm a backender, I don't have time to, nor want to learn the specificities of a framework. And I don't want my users to have to pay the cost of many dependencies that I'm not using the full power of.
Add firebase or supabase with netlify for deployment, and I'm done.
It's not purely drag and drop, but not complex either
[1]http://lit.dev/
sveltekit [1], orbit.js [2], JsonApiDotNet [3] and postgrest [4], additionally docker-compose, sometimes typeorm[5]. Good for prototyping and small home projects :-) Production readiness is questionable for the first 2 mentions...
:-)
[1]: https://kit.svelte.dev/
I am the developer of xlwings, so this is heavily biased. Anyhow, ever since I’ve added support for Google Sheets, I am building all internal tools with it. No JS/CSS required whatsoever and everybody knows how to interact with a spreadsheet UI. There are a few sample projects on GitHub, e.g., https://github.com/xlwings/xlwings-googlesheets-pandas-plots (they use FastAPI, but it’s trivial to adapt for Flask). On top, Google Sheets let you easily authorize the user on the backend, so you can give certain users read-only access to a database, as an example.
For those recommending Tailwind, it's huge if you're using it from the CDN (318K uncompressed).
Other tools (except for Tachyons, these are maybe out of scope for a home lab):
- Tachyons [0] is a small (16K-ish) utility class framework.
- DaisyUI [1] is a free and open source component lib for Tailwind.
- WindiCSS [2] is built on Tailwind with some additional features.
- UnoCSS [3], an interesting on-demand atomic CSS engine that supports Tailwind CSS, WindiCSS, Bootstrap, and Tachyons.
[0]: https://tachyons.io/
[1]: https://daisyui.com/
[2]: https://windicss.org/guide/
[3]: https://github.com/unocss/unocss
For those recommending Tailwind, it's huge if you're using it from the CDN (318K uncompressed).
Other tools (except for Tachyons, these are maybe out of scope for a home lab):
- Tachyons [0] is a small (16K-ish) utility class framework.
- DaisyUI [1] is a free and open source component lib for Tailwind.
- WindiCSS [2] is built on Tailwind with some additional features.
- UnoCSS [3], an interesting on-demand atomic CSS engine that supports Tailwind CSS, WindiCSS, Bootstrap, and Tachyons.
[0]: https://tachyons.io/
[1]: https://daisyui.com/
[2]: https://windicss.org/guide/
[3]: https://github.com/unocss/unocss
Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node.
Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a tag in your HTML document. If you'd like to try something similar to this "Tailwind" hotness everyone keeps talking about, try Basscss[2]. Again, no tooling, just need a tag.
Once you start needing to add interactivity to your site, htmx[3] is nice and decently simple. If you really want something React-like, Mithril.js[4] is very similar but much simpler.
[1] https://www.cssbed.com/
[2] https://basscss.com/
[3] https://htmx.org/
[4] https://mithril.js.org/
Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node.
Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a tag in your HTML document. If you'd like to try something similar to this "Tailwind" hotness everyone keeps talking about, try Basscss[2]. Again, no tooling, just need a tag.
Once you start needing to add interactivity to your site, htmx[3] is nice and decently simple. If you really want something React-like, Mithril.js[4] is very similar but much simpler.
[1] https://www.cssbed.com/
[2] https://basscss.com/
[3] https://htmx.org/
[4] https://mithril.js.org/
If you are in a larger scale SEO project this does blazing fast static generation with Svelte: https://github.com/Elderjs/elderjs
Yeah... I'm about as far to the other side of this as you can get.
It really looks like the x-html attribute you're complaining about is just using plain old javascript. It takes a statement that resolves to a string, and renders that.
The statement they provided happens to be pretty terrible for docs (I would have just used the built in fetch api, instead of the axios networking library - https://github.com/axios/axios), but it's plain old js regardless.
Your example is some custom fucking DSL that I have NO idea what it's doing. When does it run? how does it handle errors? What is the base url? What happens to the original text? How does it auth? What if I needed to post, or put, or delete? It's an entire fucking language I have to learn on top of the actual css/html/js knowledge required to understand this. In almost all cases, you're better off just learning "plain old javascript" since that skillset travels with you everywhere.
basically: DO NOT MAKE ME LEARN YOUR FUCKING DSL. It's wasted time and effort for me, and learning it provides absolutely zero benefits outside of your library. Further - it will fucking leak, and then you're right back at writing plain old js again, but now you have to understand the intimate details of the library implementing the dsl to tweak the right spots.
Even alpine turns me off a bit here (it's still a dsl, even if most of it reverts to plain old js) - but at least they're incredibly up front about the total time investment to learn the dsl (15 attrs, 6 props, 2 methods). HTMX is like 5 times the size (https://htmx.org/reference/), so I assume roughly 20 times the effort to learn the DSL.
There's a ton of very simple "minimalist" or "classless" or "markdown" [0] CSS files that you can apply to plain HTML to get modest good looks versus browser default styles these days. No changes to your markup, just use that raw HTML you are already comfortable with and LINK tag in a single CSS file.
This seems like a very good list with lots of handy easy to compare preview screenshots: https://github.com/dbohdan/classless-css
[0] From that idea that sometimes you just want to take a Markdown document's boring raw HTML output straight out of the processor without any other templating in between.
Man, given all the comments suggesting frameworks that will require you to do html/css/js it seems like no one has really read your comment.
For your use case I would look at [AppSmith](https://github.com/appsmithorg/appsmith) or [ToolJet](https://github.com/ToolJet/ToolJet).
These are full-stack low-code frameworks, but it's easy to use them to do just the frontend and connect to a backend API you implement yourself separately.
Check out Imba [https://imba.io/] It makes really simple to do what you're asking for.
For home-lab/internal UIs, you can go a long way with the auto-generated model-admin pages from Django. If you just need CRUD and actions triggered on a list of models, you can typically avoid any UI work and just define a few Admin classes, and if you need to make custom forms it's quite easy using Django's templating machinery to override individual pages.
https://docs.djangoproject.com/en/4.0/ref/contrib/admin/
A similar modular admin system that's more generic is https://www.forestadmin.com/, I think this one has a layout editor too. But that one requires a REST API and so it may require more plumbing, depending on what you've already built. Or it could fit nicely on top of what you already have, if you already have APIs for everything.
There's Deno Fresh now (https://fresh.deno.dev/) which looks like a pretty interesting new web framework so far.
Well, I never used the word "simple", mostly intentionally. Except to describe next's backend API stuff, which is pretty simple (just a node server at the end of the day).
Is react/next complex? Sure. Everything is far more complex than it initially seems, HTML is complex, React is even more complex if for no other reason than it builds on top of HTML.
But websites are also complex. I've found that I can very quickly reach a website complexity where I feel more productive in React than bare HTML; very quickly indeed. And next is really, mostly, just nothing on top of that; its dev tooling, yeah you sometimes have to think about where the state is (server/client) and where the rendering is happen (if you use next export: its just always on the client, done). Experientially, these are small problems; and would potentially be intractable for a website that has attained the complexity to need to solve them, built on bare HTML.
There are a few new techs that I want to try, to see if they can capture the simplicity of HTML, with the good parts of react. Vue is definitely one, but I've been following Astro for a bit and it also seems interesting; granting the ability to just go basic HTML, or bridge into React, Svelte, anything.
[1] https://astro.build/
Glad to see this. I used Preact and htm to build a small, events-flying-everywhere app that helped me get my current job, which I love. https://github.com/spaceaardvark/react-control-chaos
Highly recommend.
Related posts
- The Complete Guide to a Career in Web Development: Frameworks, Typescript, Hosting and DevOps
- Desperately want to make my own game, tripped up on certain integral parts [JS/HTML/CSS]
- Any former accountants that made the transition to Front End?
- Let's Talk About Framework-Specific UI Component Libraries
- Some front-end web technologies you should be aware of as a newcomer 🧐