html-anything: The Agentic HTML Editor That Skips API Keys and Uses Your Claude Code Login

I've spent more hours than I care to admit wrangling API keys for AI tools. One misplaced .env file, and you're staring at a leaked credential or, worse, a surprise cloud bill. In April, a Sydney developer got hit with $25,672.86 AUD in charges after a leaked key was exploited. Google refunded the money after public outcry, but that's a headache I'd rather avoid. So when I heard about html-anything, a local-first HTML editor that skips API keys and runs off your existing Claude Code login, I was intrigued.

The pitch is simple: Markdown is your draft, HTML is the finished product, and your local AI agent does the heavy lifting. No API keys, no .env files, no risk of credentials leaking into the wrong hands. Instead, html-anything detects your authenticated coding agent (Claude Code, Cursor, Gemini CLI, or one of several others) and uses it to generate polished outputs, from newsletters to web prototypes. But does it deliver on that promise, or is it just another tool that sounds good on GitHub but falls apart in practice? Here is the breakdown.

The Problem html-anything Solves

Managing API keys in AI-driven HTML workflows is a hassle. It is not just about the risk of exposing credentials. It is also the time spent on key rotation and the nightmare of a leaked key being misused in the wrong environment, whether it is development or production.

Why Managing API Keys Is Such a Pain

The security risks are hard to ignore. In 2025, 28.6 million credentials were leaked on public GitHub repositories. AI-related keys, including those for OpenAI, Anthropic, and Hugging Face, made up 1.27 million of those leaks, marking them as the fastest-growing type of exposed secrets. And the consequences aren't just theoretical. In April 2026, a Sydney developer, Jesse Davis, found himself on the hook for a Google Cloud bill of $25,672.86 AUD (about $18,391.78 USD) after a leaked key was exploited over a single weekend. Google eventually refunded the charges, but only after a wave of public pressure.

There's also the issue of agent behavior. AI coding agents often scan files like .env, and even if you set deny rules in .claude/settings.json, they can still be bypassed with creative file-reading approaches. As security researcher Houtini bluntly put it:

"Don't rely on the agent's good behaviour to keep secrets safe. Don't put the secrets where the agent can see them in the first place." (Houtini)

How html-anything Sidesteps API Key Management

html-anything takes a different approach by reusing the authenticated CLI sessions already configured in your system's PATH. If you have logged in via claude login or a similar command, the tool detects that session automatically when it starts. This eliminates the need for a .env file, key generation, or any additional credential setup.

"We reuse the session you already have logged in via claude login, cursor login, or gemini auth. Your existing subscription does the work; marginal cost is $0." (nexu-io)

The tool runs the local CLI (e.g., claude -p --output-format stream-json), sending instructions via stdin and receiving results as JSON lines. This setup keeps the agent operating entirely on your machine, avoiding the need for duplicate keys stored in files that could accidentally be exposed.

Who Benefits From html-anything

The tool is ideal for two types of users. Developers who need to quickly create static pages, dashboards, or technical documentation will find it particularly useful, especially if they already use top AI code assistants like Claude Code or Cursor locally and want to skip the manual work of crafting CSS or responsive layouts. Marketers and content creators who need polished HTML for landing pages, social cards, or newsletters will appreciate its natural-language prompt interface, which delivers functional output without requiring them to touch the underlying code.

To use html-anything, you'll need an active subscription to a supported agent. For example, Claude Pro costs $20/month, while Claude Max is $100/month. If you're already subscribed, running html-anything adds no extra cost to your workflow. The next section covers the prerequisites for getting started.

What You Need Before You Start

Supported Operating Systems and Required Tools

html-anything works on macOS, Linux, and Windows 10 or later. If you're on Windows, you'll need WSL2 for smooth CLI detection. The tool scans typical binary paths like /opt/homebrew/bin, ~/.local/bin, ~/.bun/bin, and ~/.npm-global/bin for the necessary binaries. These paths help integrate the tool with your authenticated AI agent, aligning with the local-first workflow mentioned earlier. Keep in mind that Windows users must rely on WSL2 for correct CLI binary detection.

Before cloning the repository, make sure you have Node.js (version 18 or higher), pnpm, and Git installed. You can check your Node.js version and install pnpm using these commands:

node --version
npm install -g pnpm

Additionally, at least one supported AI agent CLI must be accessible on your system's PATH. Supported options include Claude Code, Cursor Agent, Gemini CLI, GitHub Copilot CLI, OpenAI Codex, OpenCode, Qwen Coder, or Aider. The tool will automatically detect the first available agent during startup.

The hardware requirements are minimal. 4 GB of RAM is enough for basic tasks, though 8 to 16 GB is better for handling larger editing workloads.

Setting Up a Claude Code Account

If you plan to use the Claude Code agent, note that it is not included in the free Claude.ai plan. You will need either a Claude Pro subscription ($20/month) or a Claude Max subscription ($100/month) to access the claude binary. Once subscribed, install the CLI with one of these commands:

npm install -g @anthropic-ai/claude-code

On macOS, you can also install it via Homebrew:

brew install --cask claude-code

Running the claude command will trigger an OAuth prompt that links to your Anthropic account. This setup eliminates the need for an API key or .env file. To confirm the installation, run:

claude --version

If this command returns a version number, html-anything will automatically detect the agent.

For those already authenticated with other supported agents like Cursor or Gemini CLI, those sessions will work as well. While Claude Code is the primary agent, it is not mandatory. Once your account is ready, you can move on to the setup process.

Time, Effort, and Cost Breakdown

With your tools and account in place, the setup is quick. If Node.js and pnpm are already installed, you can complete the entire process (cloning the repository, installing dependencies, and verifying the agent connection) in under 5 minutes. If you are starting from scratch without Node.js, the setup might take closer to 15 minutes.

html-anything itself is free under the Apache-2.0 license. The only ongoing cost is your AI subscription. If you're already paying for a Claude Pro or Claude Max plan for other projects, using html-anything won't add any extra expenses.

How to Install and Configure html-anything

Cloning the Repo and Installing Dependencies

Getting started involves running just a few commands. Open your terminal and execute the following:

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install

Make sure to run pnpm install inside the html-anything directory; otherwise, you will encounter a "package.json not found" error. If you do not have pnpm installed, you can add it globally with:

npm install -g pnpm

Starting the Development Server

After installing dependencies, start the Next.js 16 development server by running:

pnpm dev

Once the server is running, open http://localhost:3000 in your browser. If everything is set up correctly, you will see a top bar displaying the agent name, confirming session detection.

If the top bar is blank, it usually means there is an authentication issue. To fix this, log in with your agent's specific command (e.g., claude login) in the same terminal session before starting the server. Note that if port 3000 is already in use, Next.js will automatically switch to the next available port and display the updated address.

Fixing Common Installation Problems

Here are some troubleshooting tips for common setup issues:

• PATH Problems: Run pnpm dev in a standard terminal to ensure your full shell PATH is available. Although the app scans common directories like ~/.local/bin, ~/.bun/bin, /opt/homebrew/bin, and ~/.npm-global/bin, starting from a fresh terminal session is the safest bet.
• Dependency Conflicts: Stick to pnpm for dependency management. Avoid using npm install or yarn to prevent lockfile conflicts or missing workspace dependencies. If problems persist, delete the node_modules folder and any lockfiles, then rerun pnpm install.

Blank or Crashing Previews: If the preview iframe is blank or crashes during content generation, make sure you are using the latest code. A patch addressing "preview write tool rescue" issues was merged on May 14, 2026. Pull the latest changes with:

git pull

Then restart the server.

Once these steps are completed, you are ready to connect html-anything to Claude Code.

Connecting html-anything to Claude Code

How Login-Based Authentication Works

html-anything connects to the active session established by the Claude Code CLI through the claude login command, so there is no need for an API key. During startup, Next.js scans your system's PATH directories (such as ~/.local/bin, ~/.bun/bin, and /opt/homebrew/bin) to locate the claude binary. Once found, it executes the CLI with claude -p --output-format stream-json, piping JSON output directly to the web layer while keeping your OAuth token secure.

On macOS, credentials are stored in the macOS Keychain under entries labeled Claude Code-credentials*. On Linux and Windows, they default to ~/.claude/.credentials.json. This setup uses your existing authenticated session, so you will not need to configure additional credentials.

To confirm everything is working as expected, run a simple connection test.

Running a Basic Connection Test

When the CLI is properly detected and authenticated, "Claude Code" will show up in the top-bar agent picker at http://localhost:3000. If the picker is blank or missing, it likely means the binary was not found on your PATH. Double-check that claude exists in one of the scanned directories and that your terminal session has the correct environment variables loaded.

For a quick functionality check, select a template, enter a simple prompt like "Create a red button" in the editor, and press Cmd+Enter. If the connection is active, you will see a live HTML preview after issuing the command. If the stream does not respond or produces no output, verify the session by running:

claude --version

If your session has expired, refresh it using the following (or try OpenClaude-Portable for a USB-based alternative):

npx @anthropic-ai/claude-code /login

Additionally, make sure the ANTHROPIC_API_KEY environment variable is not set. This ensures the app relies solely on your CLI session.

Once your connection is confirmed, take steps to secure your credentials.

Keeping Your Credentials Safe

Since html-anything operates locally, the main risk to your credentials comes from accidentally exposing sensitive files in a public repository. Pay close attention to two key files:

• ~/.claude/settings.json: Stores Claude Code permissions and configurations.
• Any CLAUDE.md file at your project root: Provides domain-specific context for the agent.

To safeguard these files, add a .claudeignore file to your project root. This prevents the agent from walking directories like node_modules, .next, or coverage.

If you are using macOS and encounter a "Credentials not found" error, it might be due to a locked keychain. You can unlock it with:

security unlock-keychain ~/Library/Keychains/login.keychain-db

Finally, note that the sandboxed iframe isolates generated content, keeping cookies and localStorage separate from the host application.

The Core HTML Editing Workflow

A Tour of the Interface

The editor is divided into four distinct sections. At the top, the top bar allows you to toggle between detected CLI agents. On the left, you will find a pane that accepts raw text in various formats like Markdown, CSV, JSON, SQL, or plain text. This data is processed locally using tools such as papaparse and xlsx, keeping everything within your browser. The center pane provides a searchable library of over 75 templates, categorized into 9 deliverable types like decks, posters, prototypes, and more. On the right, there is a live, sandboxed iframe preview that updates dynamically as the agent generates content.

Each template is designed with strict guidelines, including an 8px baseline grid and a minimum color contrast ratio of 4.5:1. These built-in constraints help ensure a polished, professional output.

Once you are familiar with the layout, the next step is learning how to give instructions and monitor edits in real time.

Issuing Instructions and Reviewing AI Edits

Now that you know the interface, here is how to work with the AI for HTML edits. Start by selecting a template, then paste your instruction into the left pane and press Cmd+Enter. The agent processes your input and streams the updates directly into the iframe's srcdoc using Server-Sent Events.

"Waiting for an AI generation looks like watching it type in real time." (nexu-io)

The streaming feature means you do not have to wait for the entire generation to complete before deciding if it is heading in the right direction. If the preview starts to deviate from your expectations, you can halt the process mid-stream and re-prompt. This approach not only saves time but also helps you manage token usage, which is critical for keeping subscription costs under control.

To make your workflow even smoother, take advantage of the built-in keyboard shortcuts.

Useful Features and Keyboard Shortcuts

The editor offers several shortcuts to make your work faster and more efficient. For instance, Cmd+C copies either the HTML output or an image directly to your clipboard, while Cmd+S lets you download the content as a .html or .png file. In Deck mode, you can move between slides using the arrow keys, and Ctrl+O expands the code preview, giving you a closer look at the generated source.

The export options are tailored to specific platforms. For example, when exporting to WeChat, the editor uses juice to inline CSS, keeping styles intact when pasted into the WeChat editor. For X, it employs modern-screenshot to create a high-resolution 2x DPI PNG that's ready for direct use, eliminating the need for extra formatting.

Practical Use Cases for Developers and Marketers

Cleaning Up Legacy HTML

html-anything can also clean up legacy markup. Pasted raw HTML is restructured using semantic elements like <article>, <header>, and <footer>. It also enforces proper heading hierarchies (<h1> through <h6>) and adds missing alt tags to images.

The output adheres to strict quality standards, including an 8px baseline grid and a 4.5:1 contrast ratio, keeping the cleaned-up code both accessible and visually consistent. For marketers working with platforms like email or WeChat, the one-click juice CSS inlining export simplifies post-cleanup formatting, removing the need for manual adjustments.

"HTML is the final form for humans. Markdown is just an intermediate state during writing." (nexu-io)

Adding html-anything to an Existing Project

Integrating html-anything into your workflow is straightforward. Start by cloning the repository, running pnpm dev, and pointing it at your project directory. The agent interacts directly with your existing codebase, adapting to your class names, component patterns, and naming conventions, rather than generating output that feels disconnected from your project.

To ensure the AI's edits align with your standards, you can use the SKILL.md file to define specific constraints. This might include your design system tokens, preferred CSS methodology, or accessibility guidelines. This approach turns the agent from a generic tool into one that feels tailor-made for your project.

For teams already familiar with agent-driven development, like Rakuten, who reduced average feature delivery time from 24 working days to just 5 by using parallel agent sessions in 2026, defining clear constraints through skill files is not just helpful, it is essential for maintaining consistency across the codebase.

Advanced Configuration and Integration

Adjusting Claude Code Settings

Claude Code uses a five-level hierarchy to determine which settings take precedence: Managed, CLI flags, Local (.claude/settings.local.json), Project (.claude/settings.json), and User (~/.claude/settings.json). If a change you have made is not applying, it is likely being overridden by a higher-priority configuration.

You can combine settings in your .claude/settings.json file (such as specifying the model, configuring effortLevel, or defining outputStyle) with a CLAUDE.md file that outlines your project's context, including coding conventions and design tokens. This is similar to how prompt-as-code libraries structure reverse-engineered templates for agents.

Two settings worth configuring immediately are:

• Adding npm run build and git status to your permissions.allow list to cut down on confirmation prompts.
• Explicitly adding .env files and any directories containing secrets to permissions.deny.

Wildcard matching is supported, so you can use patterns like Bash(npm run test:*) to allow entire test suites without listing every individual command.

To keep things consistent across your team, integrate these configurations with your version control system.

Using html-anything with Git and Dev Tools

Rather than relying solely on agent instructions to maintain code quality, enforce standards using hooks.

"Hooks give you consistent control over automated processes. Instead of hoping Claude Code remembers to lint your files, a PostToolUse hook runs Prettier on every HTML file."

For example, adding a PostToolUse hook in .claude/settings.json that pipes the edited file path through npx prettier --write ensures all HTML files modified by the agent are formatted immediately. Similarly, a SessionStart hook that runs git log --oneline -5 && git status --short gives the agent immediate branch and commit context.

For team environments, commit shared configuration files like .claude/settings.json, CLAUDE.md, and .claudeignore to your repository. This keeps behavior consistent across all team members' setups and aligns configuration with development workflows.

By default, html-anything expects a CLAUDE.md file. If your team uses a different standard, like AGENTS.md, you can create a symlink with ln -s AGENTS.md CLAUDE.md. Alternatively, the experimental cc-agents-md tool can modify Claude Code to load AGENTS.md directly, though this requires more setup.

Known Limitations and Open Issues

While html-anything's local-first design simplifies workflows, it does have limitations for advanced use cases. Key features still in development include a multi-template compare preview and a one-click handoff from Hyperframes to .mp4. Future additions, such as a browser extension for converting page selections into HTML templates and a history/version diff archive, are also on the roadmap. Until these features are officially released, avoid relying on them.

There is also a known bug in Claude Code (Issue #52763, v2.1.107 as of April 2026) that causes the Preview panel to re-launch every time an HTML file is edited. While annoying, it is not a dealbreaker. A bigger constraint is deployment: although the html-anything Next.js layer works on Vercel, the agent process itself must run locally to access your CLI session and filesystem. This makes fully remote or CI-only setups impractical.

To maintain performance, keep your CLAUDE.md file under 200 lines and use the /compact command to reduce context window degradation. Additionally, a .claudeignore file that excludes large directories like node_modules/ and dist/ helps the agent focus on relevant code.

Is html-anything Worth Installing?

Who Benefits Most from html-anything

If you are someone who frequently creates HTML deliverables, html-anything can simplify your workflow significantly. It is particularly useful for those already paying for Claude Pro ($20/month) or Claude Max ($100/month), and who regularly produce polished HTML outputs like landing pages, reports, social media visuals, or presentation decks. The tool offers tailored modes for different roles, as shown below:

However, if you are not already using Claude Code, Cursor, or one of the other eight supported CLIs, html-anything will not add much value. It depends entirely on existing local CLI sessions to function. For those in the right roles and ecosystems, it can dramatically reduce the time spent on producing final HTML outputs.

Setup and Usability: The Bottom Line

For users already embedded in the Claude Code ecosystem and regularly delivering HTML artifacts, html-anything is a practical addition. With 75 skill templates and nine output types, it reduces the friction of creating polished HTML at zero additional cost. Its ability to operate without an API key makes it even more appealing for those already authenticated via a supported CLI.

That said, if your workflow is heavily code-centric, remote, or CI-focused, or if you are particularly cautious about token usage, you might want to hold off. The tool requires local execution, and some features (like comparing multiple templates) are still in development.

"Markdown is the draft. HTML is what humans read. Your local agent writes it." (nexu-io/html-anything)

This quote captures the essence of html-anything's utility, especially when your goal is to produce polished HTML as the final product rather than an intermediate step in a larger process.

FAQs

How does html-anything use my Claude Code login without an API key?

html-anything spawns the local claude CLI binary directly with claude -p --output-format stream-json and pipes JSON-line output back to the Next.js web layer. Because the CLI is already authenticated through claude login (OAuth token in the macOS Keychain or ~/.claude/.credentials.json), the editor never sees or stores a separate API key.

What do I need installed for html-anything to detect my agent CLI?

You need one of the 8 supported CLIs installed and authenticated on your PATH: Claude Code, Cursor Agent, Codex, Gemini CLI, GitHub Copilot CLI, OpenCode, Qwen Coder, or Aider. html-anything scans typical paths like /opt/homebrew/bin, ~/.local/bin, ~/.bun/bin, and ~/.npm-global/bin at startup and picks the first authenticated session it finds.

Can I deploy html-anything to the cloud, or must it run locally?

The Next.js layer itself can run on Vercel, but the agent process must run locally because it needs to spawn your CLI binary and read your authenticated session. Fully remote or CI-only deployments are not supported in 2026; this is the tradeoff for skipping API keys.

How does html-anything protect against the $25k Google Cloud bill scenario?

Because there is no API key stored in a .env file or committed to git, the most common leak vector (28.6 million credentials leaked on public GitHub in 2025) is removed entirely. Your OAuth session lives in the OS keychain or ~/.claude/.credentials.json with restricted permissions, so even an accidental repo push will not expose billable credentials.

Related Blog Posts

• 10 Best AI Code Assistants for Developers in 2026
• How to Build Self-Improving Agentic AI Workspaces
• Fix Missing Environment Variables in MCP Servers
• OpenAPI Spec Generation: AI Tools