remove-lovable-tags

v1.0.0

Published

2 months ago

A production-ready CLI tool to remove Lovable-related artifacts from exported frontend projects

0High
0Medium
0Low

developernav

html-cleaner lovable cli-tool frontend cleanup html dom build-tool developer-tools

remove-lovable-tags

A production-ready CLI tool to automatically remove all Lovable-related artifacts from exported frontend projects — leaving behind clean, deployment-ready HTML.

Why?

When you export a project from Lovable (or similar AI-powered frontend builders), the output HTML often contains builder-specific artifacts:

Custom elements like <lovable>, <lovable-badge>, <lovable-section>
Proprietary data-lovable-* attributes on your elements
CDN references to Lovable's runtime scripts and stylesheets
Builder-injected <meta> tags, comments, and config <script> blocks

These artifacts are harmless during development but they ship unnecessary bytes and expose tooling details in production. This CLI removes all of them safely, without breaking your HTML structure.

Quick Start

# Run on your project without installing
npx remove-lovable-tags

# Or install globally
npm install -g remove-lovable-tags
remove-lovable-tags

By default, the tool processes index.html in the current directory and creates an index.backup.html backup.

Installation

npm install -g remove-lovable-tags

Usage

remove-lovable-tags [options]

Options

| Flag | Description | Default | |------|-------------|---------| | -p, --path <dir> | Project directory to scan | process.cwd() | | -f, --file <path> | Process a single HTML file | — | | -d, --dry-run | Preview changes, don't modify files | false | | --no-backup | Skip backup file creation | — | | --all | Scan all HTML files (not just index.html) | false | | --prettify | Prettify the cleaned HTML output | false | | --verbose | Show detailed logs for each change | false | | -v, --version | Print version | — |

Examples

# Clean index.html in the current directory (with backup)
remove-lovable-tags

# Preview what would change — safe to run anywhere
remove-lovable-tags --dry-run

# Clean a specific directory
remove-lovable-tags --path ./my-exported-project

# Clean a specific file
remove-lovable-tags --file ./public/index.html

# Clean all HTML files recursively
remove-lovable-tags --all

# Clean + prettify output + skip backup
remove-lovable-tags --prettify --no-backup

# Verbose output to see exactly what's removed
remove-lovable-tags --verbose --dry-run

What Gets Removed

Custom Elements

| Input | Output | |-------|--------| | <lovable><div>Hello</div></lovable> | <div>Hello</div> (unwrapped) | | <lovable-badge /> | (removed entirely) | | <lovable-section><section>…</section></lovable-section> | <section>…</section> (unwrapped) |

Smart rule: if a Lovable element wraps real content, the content is preserved. If it's a self-closing tooling element with no meaningful content, it's fully removed.

Attributes

Removed from any element:

data-lovable
data-lovable-* (any variant)
Any attribute whose name contains "lovable"

<!-- Before -->
<div class="hero" data-lovable-component="Hero" data-lovable-editable="true">

<!-- After -->
<div class="hero">

Scripts

<!-- Removed -->
<script src="https://cdn.lovable.dev/v1/lovable-runtime.js"></script>
<script src="https://analytics.lovable.dev/tracker.js"></script>
<script>
  window.__LOVABLE_CONFIG__ = { projectId: 'proj_abc123' };
</script>

<!-- Kept (your app code) -->
<script type="module" src="/assets/main-bundle.js"></script>

Stylesheets

<!-- Removed -->
<link rel="stylesheet" href="https://cdn.lovable.dev/v1/lovable-ui.css" />

<!-- Kept -->
<link rel="stylesheet" href="/assets/index-abc123.css" />

Meta Tags & Comments

<!-- Removed -->
<meta name="generator" content="Lovable (https://lovable.dev)" />
<meta name="lovable-project-id" content="proj_abc123" />

<!-- Removed -->
<!-- lovable: hot reload in dev mode -->
<!-- lovable editor overlay — remove before deploy -->

Before & After

Before (index.html from Lovable export):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="generator" content="Lovable (https://lovable.dev)" />
    <meta name="lovable-project-id" content="proj_abc123" />
    <link rel="stylesheet" href="https://cdn.lovable.dev/v1/lovable-ui.css" />
    <script src="https://cdn.lovable.dev/v1/lovable-runtime.js" defer></script>
  </head>
  <body data-lovable-version="1.4.2">
    <lovable>
      <div class="app-root" data-lovable-component="AppRoot">
        <h1>Hello World</h1>
      </div>
    </lovable>
    <lovable-badge position="bottom-right"></lovable-badge>
    <script>window.__LOVABLE_CONFIG__ = { projectId: 'proj_abc123' };</script>
    <script type="module" src="/assets/main.js"></script>
  </body>
</html>

After (remove-lovable-tags):

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="app-root">
      <h1>Hello World</h1>
    </div>
    <script type="module" src="/assets/main.js"></script>
  </body>
</html>

Architecture

remove-lovable-tags/
├── bin/
│   └── cli.js              # CLI entry point (commander)
├── src/
│   ├── index.js            # Public library API
│   ├── transformer.js      # HTML transformation logic (cheerio)
│   ├── processor.js        # File orchestration (read → transform → write)
│   ├── fs-utils.js         # File system utilities
│   └── logger.js           # Colored CLI output (chalk)
└── test-fixtures/
    └── index.html          # Example Lovable-exported file for testing

Design Principles

No regex for HTML — all DOM manipulation uses cheerio, a fast jQuery-like HTML parser. This ensures structural correctness even with nested or malformed tags.
Smart unwrapping — Lovable wrapper elements that contain real content have the wrapper removed but children preserved. This keeps your layout intact.
Conservative inline script removal — inline <script> blocks are only removed if they're clearly Lovable-specific (short, containing only Lovable config). Long or complex scripts are never touched.
Atomic file writes — files are written to a temp path then renamed, so a crash mid-write never corrupts your source.
Non-destructive by default — a .backup.html file is always created unless you opt out with --no-backup.

Using as a Library

import { transformHtml, processProject } from 'remove-lovable-tags';

// Transform an HTML string directly
const { html, stats } = transformHtml(rawHtml);
console.log(`Removed ${stats.removedScripts.length} scripts`);

// Process an entire directory
await processProject({
  projectPath: '/path/to/project',
  dryRun: false,
  backup: true,
  prettify: false,
  verbose: true,
});

`transformHtml(html, options?)` → `{ html, stats }`

| Field | Type | Description | |-------|------|-------------| | html | string | Cleaned HTML output | | stats.removedElements | string[] | Fully removed element descriptions | | stats.unwrappedElements | string[] | Unwrapped wrappers (children kept) | | stats.removedAttributes | string[] | Stripped attribute descriptions | | stats.removedScripts | string[] | Removed <script> tags | | stats.removedLinks | string[] | Removed <link> tags | | stats.removedComments | string[] | Removed HTML comments | | stats.removedAssetRefs | string[] | Asset URLs that were referenced |

Requirements

Node.js ≥ 18.0.0
Works on macOS, Linux, and Windows

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

remove-lovable-tags

Why?

Quick Start

Installation

Usage

Options

Examples

What Gets Removed

Custom Elements

Attributes

Scripts

Stylesheets

Meta Tags & Comments

Before & After

Architecture

Design Principles

Using as a Library

transformHtml(html, options?) → { html, stats }

Requirements

License

`transformHtml(html, options?)` → `{ html, stats }`