AI Website Builder

Describe the site you want, watch it build itself, edit every section live, and download the finished code.

Inspiration

Getting a small business online still means choosing between two bad options: pay an agency you can't afford, or fight a drag-and-drop builder that traps your site inside someone else's platform. The frustrating part is that describing a site is easy — "a bold hero with a photo background, a Why Choose Us section, a contact form" — and only the building is hard.

We wanted to close that gap. If someone can say what they want in one sentence, software should be able to produce the page. And the result should belong to them: real HTML and CSS files they can host anywhere, open in an editor, and change by hand. That last requirement is what pushed us away from a closed builder toward something that generates and exports actual code.

What it does

AI Website Builder turns a short description into a working, styled website you can preview, tune, and take with you.

• Section generation. You describe your business and choose the sections you want — hero, features, Why Choose Us, gallery, contact — and the builder produces the markup and copy for each, using layouts derived from real Figma designs rather than generic boilerplate.
• Live preview editor. Every project opens in a split view: the rendered site on one side, a control sidebar on the other. Change a headline, swap a color, adjust spacing, and the preview updates immediately without a page reload.
• Instant background image upload. Drop in a JPEG, PNG, GIF, or WebP up to 5 MB and it uploads, validates, replaces the previous file, saves to the database, and repaints the hero background in well under a second. Old images are deleted automatically so storage doesn't fill with orphans.
• Accounts and persistence. Projects belong to a logged-in user and live in the database, so you can close the tab and come back to your work instead of losing it.
• One-click export. The builder packages everything — HTML, CSS, JavaScript, uploaded assets — into a self-contained ZIP you can drop on any static host or hand to a client.

How we built it

The whole thing runs on Laravel with server-rendered Blade views, which turned out to be exactly right for a project whose main output is HTML.

• Backend: Laravel (PHP). HeroController handles generation, updates, validation, and file storage. Routes stay thin; controllers do the validation with Laravel's rules (required|image|mimes:jpeg,png,gif,webp|max:5120) and log every mutation so failures are traceable in storage/logs/laravel.log.
• Frontend: Blade templates styled with Tailwind CSS, bundled through Vite. Interactivity is vanilla JavaScript hitting JSON endpoints over fetch — the live-update flow posts multipart/form-data with a CSRF token and swaps the returned URL straight into the DOM. No SPA framework, which means the exported site has no runtime dependency on us.
• Design system: Section layouts began as Figma designs, exported to JSON and translated into Blade partials with Tailwind classes, so generated pages look deliberate instead of templated.
• Storage: Uploads land in storage/app/public/heroes/ behind Laravel's storage symlink, with the relative path kept in the database so the same record works locally and in production.
• Export pipeline: A set of PHP scripts assembles a base template, patches in the user's generated sections and assets, and emits the archive through ZipArchive.
• Testing: PHPUnit for the backend, plus written checklists covering the upload and preview flows end to end.

Challenges we ran into

Making the preview genuinely live. The first version re-rendered the entire page after every change, which felt sluggish and threw away scroll position. Getting to instant updates meant separating "save to the server" from "update the DOM," returning the new asset URL in the JSON response, and handling the in-between state with a spinner so the interface never froze or lied about what had actually been saved.

File uploads break in every direction. Wrong MIME types, files pretending to be images, 12 MB photos straight off a phone, expired CSRF tokens, a missing storage symlink in a fresh clone. Each failed differently and unhelpfully. We rebuilt the upload path around explicit validation with a specific message for each case instead of one generic "upload failed."

Orphaned files. Early on, every replacement left the old image sitting in storage forever. The fix was deleting the previous file as part of the same write — and being careful with the ordering, since deleting first and then failing the update leaves a record pointing at nothing.

Generating HTML that survives export. Markup that renders perfectly inside a Blade layout falls apart once extracted into a standalone file: relative asset paths break, Tailwind classes disappear if they never made it into the build. Getting the ZIP to open correctly on a double-click took more iteration than the generation did.

Documentation drift. We wrote docs as we went and ended up with eight markdown files quietly contradicting each other. Consolidating them was a small job we should have done far earlier.

Accomplishments that we're proud of

• The upload feels instant. Pick an image and it's on screen before your hand leaves the mouse. That single interaction does more for the sense that this is a real product than anything else in the app.
• A real export, not lock-in. The ZIP genuinely deploys. Nothing in the output phones home to us — a goal from day one that we never compromised.
• Security handled properly for a project this size. Auth-gated routes, CSRF validation, MIME verification, size limits, safe storage paths, and audit logging, all built in as we went rather than bolted on at the end.
• Output that doesn't look auto-generated. Building sections from Figma exports instead of improvising layouts is the reason the results look designed.
• Documented well enough to hand off. Quickstart, usage guide, API reference, testing checklist, troubleshooting — someone can clone the repo and be productive without asking us a single question.

What we learned

• Server-rendered HTML is underrated for this problem. We assumed we'd need React and we were wrong. Blade plus a few dozen lines of vanilla JavaScript gave us the interactivity we needed and produced cleaner exports than a component framework would have.
• Error messages are a feature. More confusion came from unclear failures than from missing capability. "That file is over 5 MB — try a smaller one" prevents a support conversation that "Error uploading image" guarantees.
• Validate on the server, every time. Client-side checks are a courtesy to the user; anything not re-checked in the controller is effectively unchecked.
• Cleanup belongs in the write path. Deletion you plan to handle "later" never happens, and storage bloat stays invisible right up until it isn't.
• Optimistic UI needs a rollback story. Showing a change before the server confirms it is wonderful until the server says no, and we had to build the path back to a consistent state.
• Write one document, not eight. Documentation only helps if there's an obvious place to start reading.

What's next for AI-Website-Builder

• More section types — pricing tables, testimonials, FAQ accordions, team grids, blog indexes — so a generated site can be more than a landing page.
• Multi-page sites with shared navigation and footers, and real routing between generated pages.
• A proper theming layer: choose a palette and typeface once and let every section inherit it, instead of styling each one by hand.
• Full RTL and Arabic support in the generated output, not just in our documentation. Given where this was built, it's high on the list.
• Drag-to-reorder sections directly in the preview sidebar.
• One-click deploy to Netlify, Vercel, or GitHub Pages, skipping the download-and-upload step entirely.
• Image optimization on upload — automatic resizing, WebP conversion, and responsive srcset generation so exported sites score well on Lighthouse by default.
• Version history, so an edit made three sessions ago can still be undone.
• A template gallery of complete starting points by industry: restaurant, portfolio, clinic, small shop.## Inspiration

Built With

• blade
• html
• javascript
• php