CodeArc

CodeArc is a browser-based frontend toolkit for writing, previewing, converting, and optimizing frontend code in one workspace.

Features

• Frontend editor: HTML, CSS, and JavaScript editing with Monaco, live preview, browser persistence, themes, copy, and project download.
• Tailwind converter: Convert Tailwind markup or a complete HTML document into HTML and compiled standard CSS using the Tailwind v4 compiler.
• Code minifier: Minify HTML, CSS, and JavaScript with copy and download actions.
• Responsive workspace: Tool pages adapt to desktop, tablet, and mobile layouts.

Routes

Tool	Route
Home	/
Editor	/code-editor
Tailwind converter	/tailwind-to-css-convertor
Minifier	/code-minifier

Stack

• React 19
• Vite
• React Router
• Tailwind CSS v4
• Monaco Editor
• React Icons
• Netlify Functions

Local development

Requirements:

• Node.js 20 or newer recommended
• npm

Install dependencies:

npm install

Start the Vite development server:

npm run dev

The Vite configuration exposes the Tailwind conversion function locally at:

/.netlify/functions/convert-tailwind

For a full Netlify Functions environment, use the Netlify CLI if it is installed:

netlify dev

Scripts

npm run dev      # Start Vite
npm run build    # Create the production bundle
npm run preview  # Preview the production bundle
npm run lint     # Run ESLint
npm test         # Run compiler smoke tests

Tailwind converter

The converter uses the official Tailwind v4 Node compiler rather than browser getComputedStyle() extraction.

It supports:

• Tailwind HTML fragments
• Complete HTML documents
• Body-level utility classes
• Responsive variants such as md:flex-row
• State variants such as hover:bg-blue-600
• Tailwind CDN script removal from converted HTML
• Original Tailwind units such as rem, vh, and CSS variables

The conversion endpoint is implemented in:

netlify/functions/convert-tailwind.mjs

Shared compiler logic lives in:

netlify/lib/tailwindCompiler.mjs

The endpoint accepts a JSON POST request:

{
  "html": "<button class=\"bg-blue-500 hover:bg-blue-600\">Click</button>"
}

and returns:

{
  "html": "...cleaned HTML...",
  "css": "...compiled Tailwind CSS...",
  "candidates": 2
}

Input is limited to protect the function from oversized requests.

Deployment

CodeArc is configured for Netlify. The standard deployment flow is:

1. Connect the GitHub repository to Netlify.
2. Use npm run build as the build command.
3. Publish the generated dist directory.
4. Let Netlify discover functions under netlify/functions.

The SPA fallback is configured in netlify.toml. The Tailwind converter must be deployed with the Netlify Function; a static-only upload will not provide the conversion endpoint.

Project structure

src/
  components/   Shared UI and tool components
  pages/        Route-level pages
  themes/       Monaco editor themes
  utils/        Download, minification, and utility logic
  data/         Homepage data
netlify/
  functions/    Netlify HTTP functions
  lib/          Shared server-side compiler logic
test/           Node smoke tests
public/         Brand assets and favicon

Production checks

Before deploying changes, run:

npm test
npm run lint
npm run build
npm audit --omit=dev

The build may report dependency externalization warnings from browser-side minification packages and a bundle-size warning. These are warnings, not build failures.