Gable — coworking template - Opencals Developer Docs

A complete coworking website you can clone and deploy today. Gable is built for a network of workspaces that rent rooms and desks by the half hour: six houses, each with an open floor sold by the seat, its own desks, meeting rooms, phone booths and, at some houses, a studio, an event space or a day office. Start here for coworking, meeting-room hire, podcast or photo studios, or any venue that rents rooms at several sites. It runs on the same Storefront API and typed TypeScript SDK as Haar, Frisor, Clear Care, VOLT, NOIR Drive, Fluently, Bali Villa Rentals, Tensile and Alba Dental. It’s set in Ireland (EUR, Europe/Dublin) with houses at Grand Canal Dock, Smithfield, Portobello and Dún Laoghaire in Dublin, Shandon in Cork and the Spanish Arch in Galway: 77 bookable spaces and 16 extras. The design is an architect’s drawing set: every section is a numbered sheet, summaries are title blocks, booking lengths are dimension lines and booked time is hatched, in cobalt with a marigold highlighter.

Live demo

template-gable.vercel.app

Source code

letsopencals/template-gable (MIT)

Deploy to Vercel

One-click deploy

Build it with AI

build-booking-site skill

Gable coworking website template on a laptop and a phone: the day planner with a meeting room and a flex desk on the day sheet, and the booking confirmation — Gable — the planner with a day sheet on desktop, the day sheet drawer on mobile

Gable template live board listing six houses with free seats on the open floor and free rooms — Free right now — seats left on every open floor and the rooms you could walk into in the next hour

The planner

A search, not a wizard. Pick a house, a day, how long (dimension-line chips: 30 minutes to a full day for rooms, a half or full day for desks), a start time and how many people. The results are the spaces that fit, each with its photo, seats, kit, the price for that span, a day bar with the booked time hatched, and “Free at 10:00”, “Next free 14:30” or “23 seats free”. Choose one, pick a time and its extras, and add it to the day. Everything is in the URL, so a search from the homepage or a space page lands exactly there.

Gable template planner with a date strip, length chips, start times and meeting rooms with hatched day bars — The planner — meeting rooms at Dock House for six people

The day sheet

The cart is a timeline of the day: every booking is a block between 08:00 and 20:00, with its extras, discounts, the hold timer, the total and Check out always in view. A desk, a room for the 11 o’clock and a booth for the call after go through one checkout. Under Fits in your day it suggests what the day is missing: a desk around your meetings, a booth in the gap between two meetings, lunch or coffee for the people in the room, a bigger room that’s free at the same time, or parking.

Gable template planner for desks beside a day sheet with a meeting room and a flex desk — The day sheet — a room and a flex desk, the first-day discount, and a parking suggestion

Gable template confirmation drawn as an architectural section of the building with the booked spaces highlighted — The confirmation — a day sheet printout with a section through the house and the route from the front door

The workspace model

This is the part worth copying even if you never ship Gable itself. It uses existing Opencals features only.

Piece	How it’s modelled
A house	A location with its address, coordinates and opening hours
A meeting room, booth, studio desk, studio, event space or day office	One product variant at exactly one house, no staff and no pool, so each is its own resource
The open floor	One product per house with `maxAttendees` = its seats; a team books several seats with `numberOfAttendees`
Seats in a room	`allowGuests` with `maxGuests` = seats − 1; the booker invites the attendees, who get the calendar invite
A kind of space	A collection (`flex-desks`, `meeting-rooms`, `phone-booths`…), mapped to its presentation in `lib/site-config.ts`
Length and price	`allowCustomDuration`: 30-minute base for rooms and booths, 4 hours for desks and events; priced per base block
Level and kit	`Level:` and `Kit:` lines at the end of the product description
Availability	Every space’s free ranges for the whole booking window, read once per house and cached for 60 s; seats left come from the ranges’ `attendees` / `maxAttendees`
Coffee, lunch, a video-call camera, parking	Add-ons scoped to products and houses; per person with `maxQuantity`, per hour with `durationMultiplied`
A first day, `GABLETEAM`, Friday afternoons	20% off flex desks on a first order, 15% off rooms with a code, 25% off rooms starting on Friday afternoons
Company, meeting name, dietary needs	Checkout questions

What’s inside

Gable template space page with seats, kit tags, a photo and a booking panel with a day bar and start times — A space — Liffey's data sheet and the booking panel

Gable template account page with a seven-day week board showing desk and room bookings — Week plan — the account opens on the week, with every booking drawn to scale

Feature	Notes
Home	Hero video, a query bar into the planner, Free right now, the houses, the kinds of space, extras, teams and FAQ
Houses	A hand-drawn location plan of Ireland, a page per house with a live board, spaces by kind, hours and getting there
Spaces	The catalogue filtered by kind, house, seats and kit; a page per space with its data sheet, plan locator and booking panel
Planner	House, day, length, start and people; results that fit with price and state; extras per space
Day sheet	A multi-item cart as a day timeline, hold timer, discounts, and suggestions in the gaps
Checkout	Details, checkout questions, a discount code, invitees for rooms, Stripe or pay at the house
Confirmation	A printable day sheet with a section through the house, add to calendar and invite people
Accounts	Passwordless 6-digit code; Week plan, change time, stay longer, invite, cancel, receipts
Pricing and extras	From-prices per kind, a “price a whole day” builder, and the extras catalogue
SEO	Per-page metadata, Open Graph, `CoworkingSpace` structured data per house, `FAQPage`, `robots.txt`, `sitemap.xml`
Stack	Next.js 15, TypeScript, Tailwind v4, `@opencals/storefront-sdk` v0.3.19

Get started

Clone and install

git clone https://github.com/letsopencals/template-gable.git
cd template-gable
npm install

Add your API key

Create a Dev Store in the Opencals dashboard with the country set to Ireland (for EUR) and choose the Gable dataset (coworking). It seeds the six houses, 77 spaces, 16 extras, the checkout questions, three discounts and sample bookings. Then grab a private storefront key (spk_, see API keys) and set OPENCALS_API_KEY and AUTH_SECRET in .env.local.

Run it

npm run dev

Your houses, spaces and extras render immediately.

Deploy

Push to your own repo and deploy to Vercel, or host anywhere Next.js runs.

Pages are server-rendered, so their API calls carry no browser Origin. Leave allowed origins empty on the key you give this template, or those calls are rejected.

Set Storefront Base URL in your dashboard (Settings → API) to your deployed domain. Every customer link (view, reschedule, cancel, leave feedback) is built as {storefrontBaseUrl}/link/{token}.

Make it yours

MIT-licensed: rebrand it, restructure it, or use it for client work. Workspace copy lives in lib/site-config.ts (the collection → kind mapping, house photography and arrival notes, extras groups, teams, FAQ). Every colour and font is a Tailwind v4 @theme token in app/globals.css, and DESIGN.md describes the drawing-set system:

@theme {
  --color-paper: #f6f6f2;     /* page */
  --color-ink: #121633;       /* text and frames */
  --color-cobalt: #2a44d4;    /* the brand: actions, drawings */
  --color-marigold: #f4b63f;  /* the highlighter: the one thing you chose */
}

Live demo

Source code

Deploy to Vercel

Build it with AI

​The planner

​The day sheet

​The workspace model

​What’s inside

​Get started

​Make it yours

The planner

The day sheet

The workspace model

What’s inside

Get started

Make it yours