Business websites
Boutique hotel website example built in Code mode
A small hotel sells a feeling first and a room second, and its website needs more freedom than a section library gives. This example for an invented Port Fairy guesthouse was built in Code mode as a React site: a full bleed hero, editorial rooms, a breakfast and garden spread and a check availability form.
The home page at three widths
The same page on a desktop, a tablet and a phone, exactly as it renders. Scroll inside each frame to read it all; nothing here can be clicked or submitted.
The rooms page
Page by page
- Home /
- Full bleed photo hero with two actions, House story with three facts, Rooms preview, three photo cards, Breakfast panel beside two photos, Port Fairy on foot over a photo, Stay a while call to action
- Rooms /rooms
- Page heading, Three room details, photos alternating sides, Included with every stay, Stay a while call to action
- Stay /stay
- Contact details, Availability request form (room, dates, message)
How Code mode built it
In Code mode the AI writes a React Router project on Tailwind and shadcn/ui, one git repository per site, then builds it and checks every page at 375, 768 and 1280 pixels before it can finish. This site has three routes, a content folder for the rooms and photos, and one component per section. The availability form is the site kit's LeadForm, so requests arrive in the same message inbox as any OneCraft site.
When to choose Code mode
Choose it when the design matters more than editing speed: hospitality, venues, studios. The trade off is that changes go through the AI chat, which edits the code and rebuilds, and the files are read only in the builder. For a site you will edit weekly yourself, the section builder is quicker.
What makes this website work
A layout the section library does not have
The Port Fairy band lays a list of walking times over a full width photograph, and the breakfast spread pairs a tall photo with a colour panel and a second image. Code mode wrote these as components, which is why the site does not look like a template.
Rates beside every room
Each room card and detail shows the nightly price with breakfast and how many it sleeps. A guesthouse loses bookings when people have to ask, so the price is part of the room, not a separate page.
A request, not a booking engine
Three rooms do not need a channel manager. The stay page asks for dates and a room through the site kit's lead form and promises a reply within hours, which is how small guesthouses actually take bookings.
Questions people ask
What is Code mode?
Code mode is OneCraft's second way to build a site. Instead of arranging sections, the AI writes a React Router, Tailwind and shadcn/ui project, builds it and shows a live preview, with version history, a zip download and data collections. It is available on paid plans and charges credits for the AI's work and each build.
Can I edit a Code mode site myself?
You change it by asking the AI chat, which edits the files, rebuilds and shows the result; a failed build is rolled back. The files are read only in the builder, and you cannot upload your own code into the project. You can download the whole project as a zip at any time.
How do availability requests arrive?
The stay page uses the site kit's LeadForm with the quote kind, asking for the room, dates and a message. Each request lands in the site's message inbox in OneCraft with an email to the owner, the same way contact forms work on section built sites.
Can a Code mode site take bookings with payment?
A Code mode site can use the store, so a deposit could be a product paid through Stripe Checkout on the owner's connected account. There is no room calendar or channel manager, so a hotel with many rooms should link to its booking engine.
Is the site fast on phones?
Every page is prerendered to static HTML and served from a CDN, with images sized and loaded lazily below the first screen. The build fails if any page scrolls sideways or throws errors at 375, 768 or 1280 pixels, which is the layout check Code mode runs on each build.
Can I start from a description instead?
Yes. Choose Code mode under Advanced in the generator, describe the property, rooms and rates, and optionally give a design reference page. The AI writes the project, builds it and opens the code builder when the first build is green.
Build your own in about a minute
The button below opens the generator with this use case already described. Change the wording to match your own, generate, then edit anything you like.
Make one like thisOther website examples
Wedding venue website example with packages and a day timeline
Couples shortlist wedding venues on photos, capacity and price, then ask whether their date is free. This example for an invented Hunter Valley vineyard, built in Code mode, gives them all four: a calm photographic home page, the three spaces with capacities, a wedding day timeline and a packages page with prices.
Brewery website example with a live looking tap list
A taproom website gets one question more than any other: what is on tap this week. This example for an invented Marrickville brewery, built in Code mode, answers it on the home page with styles, strength and schooner and pint prices, then covers the weekly events, opening hours and a functions enquiry.
Law firm website example with a fixed fee page
Most people who need a lawyer have never hired one, and the first thing they want to know is what it will cost. This two page example for an invented Parramatta firm answers that up front: a free 20 minute call, a costs agreement in writing, and a page of fixed fees for wills, conveyancing and consent orders.
For everything this generator can do, see the website maker.
Written and checked by the OneCraft team. Last checked .