Skip to content
01WEBSITES & APPS

Build the whole website. And everything behind it.

Public storefronts, portals and internal apps on one canvas. 86+ components, real data bindings, auth, SEO and one-click versioned publishing.

alpine-supply.com / homeSAVED
Publish
ALPINE SUPPLYShopStoriesCart · 2
Gear for the high places.
Field-tested packs, shells and tents. Shipped carbon-neutral.
Shop the fall line
Product grid · {{query.products.data}}
Ridgeline Shell
$189
Basecamp Tent
$423.50
Trail Pack 38L
$148
pages · home / catalog / checkout / account publish-ready
86+
components · 12+ categories
25+
motion presets
16+
event types · 10+ actions
26+
page-logic blocks
1.1COMPONENT LIBRARY

86+ components. One design system.

A dozen-plus categories that already match each other, from inputs to OTP and signature capture, tables, charts, media, overlays. And when you need more, write your own React in the Component Studio: npm imports included, auto-registered next to the built-ins.

components / all categories
86+ components · 12+ categories
Inputs14
InputSelectComboboxSliderOTPRating
Data display9
TableTimelineBadgeAvatarKbd
Charts · BI10
ChartData tablePivotKPI cardSlicer
Capture4
File dropSignatureMicrophoneScanner
Media7
ImageVideoCarouselQR codePDF viewer
Overlays7
DialogDrawerSheetPopoverTooltip
Navigation8
TabsSidebarCommandBreadcrumb
Text · code5
Rich textMarkdownJSON editor
+ your ownComponent Studio · write React inline · npm imports · auto-registers in the palette
1.2EXTEND IT

Built-ins not enough? Write yours. No build step.

The Component Studio takes real React, npm imports included, compiles it live and registers it in the palette next to the built-ins. Package sections as composite blocks and edit them once for every page. Start pages from templates or save your own.

component studio / PriceBadge.jsx
compiled · in palette ✓
import { component } from 'nocodebi';
function PriceBadge({ value, sale }) {
…your React, npm imports included…
}
component(PriceBadge, {
name: 'Price badge', props, settings
});
// no build step. compiles live, appears in the palette
Composite blocks
Order summaryused on 4 pages · edit once
Page templates
StorefrontAdmin CRUDAuth pages
start from one, or save any page as your own
✦ Fix with Veylo
compile or runtime error → one click, the agent repairs the code
1.3PASTE IT

Paste the site you already have. Every tag becomes a component.

Open the JSX editor, paste any HTML template: your old landing page, a Tailblocks section, an export from anywhere. Hit Apply and nothing gets boxed into an embed. Every element lands on the canvas as a real component, selectable in the layers and styleable like the built-ins. The pasted button takes real click actions, the pasted form submits with its field values, and entrance, hover and scroll animations attach per element. Old scripts stay behind; you rewire behavior with actions. And the canvas serializes back to JSX whenever you want the code.

jsx-editor / pasteHTML / JSX
Apply
pasted · from your old landing pageCtrl+Enter to apply
1<section class="hero dark">
2 <h1>Gear for the high places.</h1>
3 <p>Field-tested packs, shells and tents.</p>
4 <form class="notify">
5 <input type="email" placeholder="you@basecamp.co" />
6 <button class="cta">Notify me</button>
7 </form>
8</section>
Applied · every tag is now a component✓ 6 nodes
<section><h1><p><form><input><button>selected
button · Clicked → run add_leadAnimate · Slide Up · In Viewform · Submitted · {{event.values}}
re-style and drag like any componentruns in the published appround-trips back to JSX
paste any HTML templateinvalid nesting auto-repairedold scripts stay behind · rebind with real actions
1.4DATA & EVENTS

Point at data. Wire the behavior.

Any property takes an expression. {{query.orders.revenue}} is a binding, not an integration, and it works across 14+ scopes: queries, components, variables, storage, URL params, the signed-in user. Then chain 16+ event types into 10+ actions with onSuccess / onError branching.

alpine-admin / ordersSAVED
Revenue · this month
$482,310
bind value
{{query.orders.revenue}}
OrderCustomerTotalStatus
#4821Dana Whitfield$612.50Paid
#4820Marcus Oyelaran$91.80Paid
#4819Theo Vance$1,204.00Hold
1.5DESIGN SYSTEM

Your brand, tokenized. Motion included.

32+ semantic theme tokens with light and dark variants per theme. Flip the toggle on the panel and watch the card follow. 25+ motion presets cover load, hover, tap, in-view, drag and scroll-linked animation, with per-state styling and no keyframes to write.

theme / Alpine
Order #4821 · Dana Whitfield
$612.50 · paid · 2 items
Fulfil orderRefund
Tokens · 32+
--primary--accent--card--ring--chart-1…5--sidebar
Motion · 25+ presets
Fade inSlide upLiftGlowZoom in viewScroll-linkedDrag
light + dark per theme · per-state hover / tap
1.6PAGES · AUTH · SEO

Every page a real page. Routes, locks, meta.

Folders, dynamic routes like /product/[id], catch-alls, protected pages with login and error redirects, plus per-page SEO: title templates, descriptions, OG images, robots and canonical control, favicons, 12+ locales, custom CSS and head scripts.

alpine-supply.com / pages
12+ locales
Routes
/homepublic
/product/[id]dynamic
/checkoutpublic
/accountprotected 🔒
/docs/[[...slug]]catch-all
login / logout / 404 / error redirects
SEO · /product/[id]
title%page_title% · Alpine Supply
descriptionField-tested gear…
og imageauto from page
robotsindex · follow
canonicalalpinesupply.co
favicon · logos · custom css / head scripts
1.7PAGE LOGIC

A backend on every page. No server to run.

Each page can run server-side logic built from 26+ block types. Validate with schemas, branch, loop, call HTTP and AI, wait for human approval, respond or redirect. The same engine that powers workflows, one canvas away from your form.

/checkout / page logic
26+ block types
onSubmit · checkout form
Validateschema · zod
Branchtotal > $500
AIfraud check
Response302 → /thanks
LoopParallelHTTPQueryWaitApprovalCode+18 more
1.8SHIP TOGETHER

Publish versioned. Build together.

Deployments are immutable and versioned with release notes. Promote Dev to Prod, roll back in one click. While you build: live cursors, comment threads with @mentions and reactions, and autosave every 1.5 seconds with shared undo.

deployments / alpine-supply
Publish v15
v14fall-line launch · product pageslive · Prod
v13checkout copy + OTP step2d agorollback
/home / hero section
CBR3 editing
CCharudatton Hero section · 12m

@Bhagyesh can we A/B the headline before v15 ships?

👍 2🔥 1 resolved
autosave · 1.5s · undo across collaborators

The result is a real website. Live, fast, yours.

Not an embed, not a widget. A published site with its own URL, SEO and auth, responsive out of the box.

🔒 alpinesupply.co published · 2m ago
ALPINE SUPPLYShopStoriesAccountCart · 2
Gear for the high places.
Field-tested packs, shells and tents. Shipped carbon-neutral from the Rockies.
Shop the fall line
Ridgeline Shell
$189
Basecamp Tent
$423.50
Trail Pack 38L
$148
SEO ✓OG card ✓auth · /accountdynamic routes · /product/[id]

Common questions

Both, from the same canvas. Public sites get per-page SEO with title templates, Open Graph images, robots and canonical control, favicons and 12+ locales; internal apps get protected routes with login, logout, 404 and error redirects. Alpine's storefront and its admin are the same project.