Embed · <nano-search>
Your search, on any site — two lines of HTML
The same detection-aware search that powers the studio, packaged as a web component any page can load. Paste the script tag, drop the element, hand it a publishable key — no build step, no framework, no backend of your own.
Try it — this is the real widget
Loaded from /embed/search.js, searching production data with a real publishable key you can read in this page's source. Type over the query, switch the theme, click an accent, reshape the corners and the card size — every knob below is part of the public embed API.
Style it live
--ns-accent: preset gold--ns-radius: 12px--ns-card-min: 220pxregions="off"Dark is the reference design; the widget ships with it as the dark preset.
--ns-card-minonly decides how large cards render on your page — pure CSS, applied page-side. The key's max_image_sizescope is different: it is the maximum resolution the API will ever serve that key, enforced server-side (this demo's key is capped at 1200px).
Layouts
One element, three very different jobs. Each example below is another live, independent instance of the widget, running the same publishable key as the playground above — reshaped with nothing but a container and a CSS variable or two. Every demo sits in a box that scrolls internally: reach the end of one and the next page of results loads inside it (load-more="auto" is the default), while the page itself stays walkable.
Full width
No layout CSS at all. The element is a block that fills whatever it lands in — so this example breaks out of the page column and runs edge to edge of your screen, the hero and main-content case. Cards column up at the default 220px minimum.
The snippet
<script type="module" src="https://nanostudiopro.com/embed/search.js"></script>
<nano-search publishable-key="pk_sf_live_YOUR_KEY"></nano-search>Sidebar column
The same element squeezed into a 320px rail beside your own content. One variable — --ns-card-min: 130px — re-columns the grid so the narrow rail gets one to two sensible columns instead of a single oversized card.
The snippet
<script type="module" src="https://nanostudiopro.com/embed/search.js"></script>
<style>
.search-rail { width: 320px; max-height: 520px; overflow-y: auto; }
.search-rail nano-search { --ns-card-min: 130px; }
</style>
<aside class="search-rail">
<nano-search publishable-key="pk_sf_live_YOUR_KEY"></nano-search>
</aside>Compact thumbnail widget
The whole widget on a genuinely small square card — the footer, product-column, or popover case. A 340px square that scrolls inside itself, tiny thumbnails via --ns-card-min: 64px and a tight --ns-gap, captions switched off through the ::part(caption)hook. Still no cropping — every thumbnail keeps its photo's real aspect ratio.
The snippet
<script type="module" src="https://nanostudiopro.com/embed/search.js"></script>
<style>
.thumb-box { max-width: 340px; aspect-ratio: 1; overflow-y: auto; }
.thumb-box nano-search { --ns-card-min: 64px; --ns-gap: 4px; }
.thumb-box nano-search::part(caption) { display: none; }
</style>
<div class="thumb-box">
<nano-search publishable-key="pk_sf_live_YOUR_KEY"></nano-search>
</div>Put it on your site
Create your key in Settings → API Tokens → Publishable search keys— scope it to the projects you want public and lock it to your site's origin. Then paste:
The embed
<script type="module" src="https://nanostudiopro.com/embed/search.js"></script>
<nano-search
publishable-key="pk_sf_live_YOUR_KEY"
theme="auto"
placeholder="Search the collection"
></nano-search>Make it yours
nano-search {
--ns-accent: #38bdf8; /* your brand color */
--ns-radius: 4px; /* your corners */
--ns-font: inherit; /* your typography (the default) */
}Ten variables, three presets, ::part() hooks, and three DOM events — the full reference →
Safe in HTML
Publishable keys are public by design: read-only, scoped to the projects you choose, origin-locked, and rate-limited server-side. Secret keys are refused before a single request leaves the page.
Zero dependencies
One self-contained ES module — about 17 KB gzipped. No React, no bundler, no build step on your side. Cards render at each photo's real aspect ratio.
Yours to theme
Ten CSS custom properties, dark and light presets with an auto mode, and ::part() hooks for everything else. It inherits your typography and blends into your page.