Found in Space Learn & build

Lesson 1

Set up a SkyKit browser

Paste an interactive star viewer into a static page or CMS block, then choose display options with HTML attributes.

Learning goal

This first lesson starts with the no-JavaScript embed. You add one viewer <div>, one optional status element, and one module script.

The viewer already knows how to show stars, respond to drag and keyboard input, resize with the page, draw constellation layers, and write a small loading readout.

Live code

Small SkyKit star browser

Edit the HTML attributes, then run it. The preview opens in a sandboxed iframe.

Ready.
Console 
 
 
 
  
  
 
 
Things to try
 
     
  • Change the viewer height from 500px to 700px.
    •  
  • Add data-skykit-magnitude="7".
    •  
  • Add data-skykit-speed="4".
    •  
  • Add data-skykit-exposure="2600".
    •  
  • Add data-skykit-look-at="05h 36m 12.81s, −01° 12′ 06.9″" to start facing Alnilam in Orion's belt.
    •  
  • Try data-skykit-mouse-mode="strafe" for the first-person drag direction, or grab to pull the sky around.
    •  
  • Add data-skykit-constellations="western" to draw constellation boundaries.
    •  
  • Add data-skykit-constellation-art="lazy" to load constellation artwork only when it is needed.
    •  
  • Remove the <pre> and data-skykit-status attribute to make a clean decorative embed.
    •  
 
 
 Attribute variant  
 
<div
  data-skykit-browser
  data-skykit-status="#skykit-status"
  data-skykit-magnitude="7"
  data-skykit-speed="4"
  data-skykit-exposure="2600"
  data-skykit-look-at="05h 36m 12.81s, −01° 12′ 06.9″"
  data-skykit-mouse-mode="strafe"
  data-skykit-constellations="western"
  data-skykit-constellation-art="lazy"
  style="width:100%;height:520px;background:#02040b"
></div>

<pre id="skykit-status">Loading stars...</pre>

<script type="module" src="https://esm.sh/@found-in-space/skykit@0.2.0/embed?bundle&deps=three@0.170.0"></script>
 
  
 
 
What changed in the code
 

The viewer is marked with data-skykit-browser. The embed script finds
					that element and creates the default SkyKit star viewer there. The status attribute
					is optional; it points at a normal HTML element where the viewer can write a small
					loading/status readout.

 

The important point: the beginner embed owns the plumbing. You do not create a
					renderer, camera, data source, star drawing layer, animation loop, resize handler,
					or cleanup handler in your first SkyKit page.

 
 
 
Source and next steps
 
Next, get the browser handle.
 

This first example is intentionally tiny. Once the viewer is on the page, the next
					step is to ask SkyKit for the live browser object and move the view with a script.

  
 
 
Use this locally
 

When you move from a pasteable embed to a local app, install SkyKit and Three.js,
					then use the beginner browser entry.

 
 
 Install  
 
npm install @found-in-space/skykit@0.2.0 three
 
  
 
 Local imports  
 
import { createSkykitBrowser } from '@found-in-space/skykit/browser';

await createSkykitBrowser({
  host: '#viewer',
  status: '#status',
});