Brad Simon

Posted on Feb 27

JustHTML.dev — AI-Assisted, Vanilla-First Web Development

#devchallenge #weekendchallenge #showdev

DEV Weekend Challenge: Community

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

[https://justhtml.dev]

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

DEV Community