This is a submission for the DEV Weekend Challenge: Community
The Community
This project is for developers building small-to-medium web apps who feel forced into React/Vite stacks by default — even when their needs are simple.
A lot of us experimented with tools like Lovable and Bolt.new. They’re powerful. They scaffold React/Vite/Vue apps instantly.
But once AI entered the workflow — Claude, OpenAI, Copilot, Gemini — something changed.
If AI can generate clean HTML, CSS, and JavaScript directly… why are we defaulting to heavy frameworks for everything?
This is for the builders who are thinking:
“Is the complexity actually required — or just assumed?”
What I Built
I built JustHTML.dev — a curated directory of websites built with vanilla HTML, CSS, and JavaScript.
No front-end frameworks.
No client-side runtime layer.
No dependency tree explosion.
It’s not anti-framework. It’s just intentional.
The site:
Automatically analyzes and scores submissions
Displays a public “Last Verified” status
Ranks sites based on implementation quality
Focuses on clarity and simplicity
It’s free. No ads. Just a place to inspire, teach, and showcase vanilla-first builds.
The goal is to prove that with AI assistance, vanilla is not a step backward. In many cases, it’s faster, cleaner, and easier to maintain.
Demo
Code
The project is built with a custom C# back-end that renders HTML using simple templating and string replacement.
It intentionally avoids front-end frameworks and Node-based build systems. The final output delivered to the browser is clean, server-rendered HTML with minimal JavaScript.
Main HTML Layout Template:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ head }}
<link rel="stylesheet" href="/css/style.css">
{{ page.css }}
</head>
<body>
{{> header }}
<main>
{{ body }}
</main>
{{> footer }}
<script src="/js/main.js"></script>
{{ page.js }}
</body>
</html>
Storing Metadata for the Index.html:
---
title: "justhtml.dev — You don't need npm for that"
description: "A community for developers who build real things with Vanilla HTML, CSS, and JavaScript. No frontend frameworks. No npm. Just the web platform."
keywords: vanilla html, no npm, no react, web development, html css js
og_title: "justhtml.dev — You don't need npm for that"
og_description: "A community for developers who build real things with Vanilla HTML, CSS, and JavaScript."
og_image: https://justhtml.dev/img/og/og-home.jpg
layout: default
robots: index,follow
---
Automatically build sitemap.xml:
private async Task WriteSitemapXmlAsync()
{
var sb = new StringBuilder();
sb.AppendLine("""<?xml version="1.0" encoding="UTF-8"?>""");
sb.AppendLine("""<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">""");
sb.AppendLine();
// Static content pages (scanned from /content/*.html)
foreach (var entry in GetStaticPageEntries())
{
AppendUrl(sb, $"{_baseUrl}{entry.url}", entry.lastmod, entry.changefreq, entry.priority);
}
// Dynamic showcase entries (listed only)
var showcases = await db.Showcases
.Where(s => !s.IsDeleted && !s.IsHidden && s.Status == SiteStatus.Listed)
.Select(s => new { s.Slug, s.SubmittedAt, s.MetadataFreshedAt })
.ToListAsync();
foreach (var s in showcases)
{
var lastmod = (s.MetadataFreshedAt.HasValue && s.MetadataFreshedAt.Value > s.SubmittedAt)
? s.MetadataFreshedAt.Value.ToString("yyyy-MM-dd")
: s.SubmittedAt.ToString("yyyy-MM-dd");
AppendUrl(sb, $"{_baseUrl}/showcase/{s.Slug}.html", lastmod, "weekly", "0.6");
}
sb.AppendLine("</urlset>");
var path = Path.Combine(_webRootPath, "sitemap.xml");
await File.WriteAllTextAsync(path, sb.ToString(), Encoding.UTF8);
logger.LogInformation("sitemap.xml written ({Count} showcase entries)", showcases.Count);
}
How I Built It
Backend: .NET (minimal server setup)
Rendering: Lightweight HTML templating via string replacement
Frontend: Vanilla HTML, CSS, JavaScript
Deployment: Docker container
Verification system: Automated scanning and scoring logic
The architecture is intentionally simple:
Server builds HTML → Browser renders it → Minimal JS enhances it.
No hydration. No runtime framework. No massive dependency installs.
AI was heavily involved in development — assisting with structure, logic refinement, and iteration — but the architectural decisions were deliberate.
JustHTML.dev is an experiment in architectural restraint.
AI reduces the cost of writing code. It doesn’t justify adding layers.
It was about building the simplest stack that gets the job done.
Coder B
Top comments (3)
This is philosophically aligned with something I've been thinking about a lot. AI makes vanilla HTML/CSS/JS viable for way more projects than we assumed and the default reach for React is often just muscle memory, not actual requirement. The auto-analysis and scoring of submissions is a smart curation mechanism. Would love to see a "complexity score" that shows how much simpler the vanilla version is vs. the framework equivalent. That'd be a killer argument.
The complexity is there, but purposely hidden behind the scenes. There are 3 results that can be displayed:
Vanilla Verified
Vanilla Likely
Vanilla Output Uncertain
If there are clear signs of a framework, the score will be 0 and the site rejected. The owner will get an email stating what was found to indicate the site was not vanilla.
As an addendum, I had AI give me a decent summary of how the scoring works:
Each submitted site receives a Vanilla Confidence Score (0–100) based on automated analysis of its delivered front-end.
Our system examines:
Asset structure and naming patterns
JavaScript delivery characteristics
Presence of known framework/runtime fingerprints
Page structure and rendering behavior
Verification freshness over time
What We’re Looking For
We aim to verify that a site delivers plain HTML, CSS, and JavaScript without relying on Node-based build tools, front-end bundlers, or SPA frameworks.
Sites that exhibit clear signs of modern bundling pipelines or front-end framework runtimes will not qualify.
What Doesn’t Automatically Disqualify a Site
Server-side rendering (PHP, ASP.NET, Rails, etc.)
Dynamic content loading using standard JavaScript
Larger JavaScript files (complex ≠ non-vanilla)
Score Tiers
90–100 — Vanilla Verified
Strong confidence in pure vanilla delivery.
80–89 — Vanilla Likely
Minor uncertainty, no strong framework indicators detected.
70–79 — Vanilla Output (Build Uncertain)
No hard disqualifiers found, but some signals suggest possible build tooling.
Below 70 — Not Listed
Ongoing Verification
All listed sites are periodically re-scanned.
Each listing displays a “Last Verified” date to ensure continued compliance.
If a site’s structure changes significantly, its score may change accordingly.