https://engine.needle.tools/docs/assets/templates.html-aIBKvkmM.js

1import{_ as t,c as a,i as s,o as r}from"./app-DqiSUqwL.js";const n={};function i(l,e){return r(),a("div",null,e[0]||(e[0]=[s(`<h1 id="project-templates-samples" tabindex="-1"><a class="header-anchor" href="#project-templates-samples"><span>Project Templates &amp; Samples</span></a></h1><p>Get started quickly with these official templates and sample projects. Each repository can be cloned or used as a GitHub template to kickstart your project.</p><div class="hint-container tip"><p class="hint-container-title">Quick Start</p><p>The fastest way to create a new project is with <code>npm create needle</code> or by visiting <a href="https://engine.needle.tools/new" target="_blank" rel="noopener noreferrer">engine.needle.tools/new</a>.</p></div><hr><h2 id="templates" tabindex="-1"><a class="header-anchor" href="#templates"><span>Templates</span></a></h2><table><thead><tr><th>Template</th><th>Description</th></tr></thead><tbody><tr><td><a href="https://github.com/needle-engine/vite-template" target="_blank" rel="noopener noreferrer"><strong>Vite Template</strong></a></td><td>The default Needle Engine starter — vanilla HTML/JS with Vite. Also available at <a href="https://engine.needle.tools/new" target="_blank" rel="noopener noreferrer">engine.needle.tools/new</a></td></tr><tr><td><a href="https://github.com/needle-engine/scrollytelling-template" target="_blank" rel="noopener noreferrer"><strong>Scrollytelling Template</strong></a></td><td>Kickstart 3D scroll-driven websites</td></tr><tr><td><a href="https://github.com/needle-engine/react-sample" target="_blank" rel="noopener noreferrer"><strong>React</strong></a></td><td>Needle Engine with React</td></tr><tr><td><a href="https://github.com/needle-engine/vuejs-sample" target="_blank" rel="noopener noreferrer"><strong>Vue.js</strong></a></td><td>Needle Engine with Vue.js</td></tr><tr><td><a href="https://github.com/needle-engine/sveltekit-sample" target="_blank" rel="noopener noreferrer"><strong>SvelteKit</strong></a></td><td>Needle Engine with SvelteKit (includes Needle Cloud deployment)</td></tr><tr><td><a href="https://github.com/needle-engine/svelte-sample" target="_blank" rel="noopener noreferrer"><strong>Svelte</strong></a></td><td>Needle Engine with Svelte</td></tr><tr><td><a href="https://github.com/needle-engine/nextjs-sample" target="_blank" rel="noopener noreferrer"><strong>Next.js</strong></a></td><td>Needle Engine with Next.js / Vercel</td></tr><tr><td><a href="https://github.com/needle-engine/react-three-fiber-sample" target="_blank" rel="noopener noreferrer"><strong>React Three Fiber</strong></a></td><td>Needle Engine with React Three Fiber</td></tr></tbody></table><hr><h2 id="samples" tabindex="-1"><a class="header-anchor" href="#samples"><span>Samples</span></a></h2><table><thead><tr><th>Sample</th><th>Description</th></tr></thead><tbody><tr><td><a href="https://github.com/needle-engine/sample-3d-over-html" target="_blank" rel="noopener noreferrer"><strong>3D Over HTML</strong></a></td><td>Overlay 3D content on top of regular HTML pages</td></tr><tr><td><a href="https://github.com/needle-engine/progressive-meshes-sample" target="_blank" rel="noopener noreferrer"><strong>Progressive Meshes</strong></a></td><td>Automatic LOD generation and progressive mesh loading</td></tr></tbody></table><hr><h2 id="more-samples" tabindex="-1"><a class="header-anchor" href="#more-samples"><span>More Samples</span></a></h2><p>Browse 100+ interactive samples at <a href="https://samples.needle.tools" target="_blank" rel="noopener noreferrer"><strong>samples.needle.tools</strong></a>.</p><p>For Unity users, additional scene templates and sample scenes are available directly in the editor via <strong>Needle Engine &gt; Explore Samples</strong>.</p><hr><h2 id="create-needle-cli" tabindex="-1"><a class="header-anchor" href="#create-needle-cli"><span>Create Needle CLI</span></a></h2><p>You can scaffold a new project from the command line using <code>create-needle</code>:</p><div class="language-bash" data-highlighter="shiki" data-ext="bash" style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#263238;"><pre class="shiki shiki-themes one-light material-theme vp-code"><code class="language-bash"><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#FFCB6B;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> create</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> needle</span><span style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;"> [directory] </span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">[</span><span style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;">options</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">]</span></span></code></pre></div><table><thead><tr><th>

1Option</th><th>Description</th></tr></thead><tbody><tr><td><code>--template, -t &lt;key&gt;</code></td><td>Template to use (e.g. <code>vite</code>, <code>react</code>, <code>vue</code>, <code>svelte</code>, <code>sveltekit</code>, <code>nextjs</code>)</td></tr><tr><td><code>--list, -l</code></td><td>List available templates as JSON</td></tr><tr><td><code>--force, -f</code></td><td>Overwrite existing directory</td></tr><tr><td><code>--help, -h</code></td><td>Show help</td></tr></tbody></table><p><strong>Examples:</strong></p><div class="language-bash" data-highlighter="shiki" data-ext="bash" style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#263238;"><pre class="shiki shiki-themes one-light material-theme vp-code"><code class="language-bash"><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#FFCB6B;">npx</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> create-needle</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> my-app</span><span style="--shiki-light:#986801;--shiki-dark:#C3E88D;"> --template</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> vite</span></span>
2<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#FFCB6B;">npx</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> create-needle</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> my-app</span><span style="--shiki-light:#986801;--shiki-dark:#C3E88D;"> -t</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> react</span></span>
3<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#FFCB6B;">npx</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> create-needle</span><span style="--shiki-light:#986801;--shiki-dark:#C3E88D;"> --list</span></span></code></pre></div>`,20)]))}const o=t(n,[["render",i]]),h=JSON.parse('{"path":"/reference/templates.html","title":"Project Templates & Samples","lang":"en-US","frontmatter":{"title":"Project Templates & Samples","description":"Ready-to-use Needle Engine templates and sample projects for various frameworks and use cases.","head":[["link",{"rel":"canonical","href":"https://engine.needle.tools/docs/reference/templates.html"}],["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/imgs/default-unfurl-image-2.webp"}],["meta",{"name":"og:description","content":"Ready-to-use Needle Engine templates and sample projects for various frameworks and use cases."}],["meta",{"property":"og:title","content":"Project Templates & Samples — Needle Engine"}]]},"git":{"updatedTime":1772104823000,"contributors":[{"name":"Marcel Wiessler","username":"","email":"[email protected]","commits":3}],"changelog":[{"hash":"8c087d9fc8b82cabc8bdc50da2975642ccdf2605","time":1772104823000,"email":"[email protected]","author":"Marcel Wiessler","message":"update create needle CLI docs"},{"hash":"ff67dae9fa294e29823b61b70a8b09183be9a064","time":1772104694000,"email":"[email protected]","author":"Marcel Wiessler","message":"add create-needle cli docs"},{"hash":"769e0e02c6c6fa54bade6c4408dd5effba743124","time":1772103247000,"email":"[email protected]","author":"Marcel Wiessler","message":"add a templates page"}]},"filePathRelative":"reference/templates.md"}');export{o as comp,h as data};