Studio X Help Guide

What Works Here

What profile code can and can't do, and why.

Your profile runs in a sandbox: a walled-off space the browser treats as its own separate website. Your code can do almost anything inside it, but it can't reach Studio X, anyone's login, or the page around it. That's what lets Xinsto allow JavaScript on every profile without putting visitors at risk.

A few everyday things work a little differently because of it. Here's the full list, with workarounds.

At a glance

Works	Doesn't work
HTML, CSS and JavaScript	`alert()`, `confirm()`, `prompt()` pop-ups
Images, fonts, audio and video from other sites	Submitting `<form>`s
Links (they open in a new tab)	Saving things in the browser (`localStorage`, cookies)
`window.open()` for new tabs	Sending the visitor's whole window somewhere else
Fetching data from public APIs that allow it	Reading or changing anything outside your profile
Animations, timers, canvas, games	Some embedded players from other sites

Pop-ups: use the page instead

alert() is silently ignored on profiles (nobody misses those). Show your message on the page instead:

Try it: edit the code and watch the resultAdd to my profile

<style>
  #toast { display: none; background: #222; color: #fff; padding: 8px 12px; border-radius: 6px; margin-top: 8px; }
</style>

<button id="hi">Say hi</button>
<div id="toast"></div>

<script>
  document.getElementById("hi").onclick = function () {
    alert("You won't see this one.");      // ignored in the sandbox
    var t = document.getElementById("toast");
    t.textContent = "Hi! This message is part of the page, so it works.";
    t.style.display = "block";
  };
</script>

Forms: use buttons and JavaScript

Forms can't be submitted from a profile. (That's on purpose: it stops fake login boxes.) Inputs still work fine with JavaScript, so build quizzes, calculators and generators with a normal button:

Try it: edit the code and watch the resultAdd to my profile

<p>What's your favourite colour?</p>
<input id="fav" placeholder="type a colour, like teal">
<button type="button" id="go">Paint it</button>
<div id="paint" style="height: 40px; margin-top: 8px; border: 1px solid #999"></div>

<script>
  document.getElementById("go").onclick = function () {
    document.getElementById("paint").style.background = document.getElementById("fav").value;
  };
</script>

Tip: always give buttons type="button". Inside a <form>, a plain button tries to submit it, which is blocked here.

Saving things: not possible here

Profile code can't store anything in the visitor's browser, so localStorage and cookies throw an error. If you use code from elsewhere that saves settings (like a “remember dark mode” script), wrap that part in try { } catch (e) { } so the rest of your script keeps running:

Try it: edit the code and watch the resultAdd to my profile

<p id="result"></p>

<script>
  var saved = "nothing";
  try {
    localStorage.setItem("visited", "yes");
    saved = "saved!";
  } catch (e) {
    saved = "not allowed here, and that's OK: the rest of the script still ran";
  }
  document.getElementById("result").textContent = "Saving: " + saved;
</script>

Links

Every link opens in a new tab automatically. You don't need target="_blank".
Links that try to replace the whole window (target="_top") don't work.
Jump links to a spot on your own profile work: give the spot an id and link to it with #, like href="#music". href="#" scrolls back to the top.

Try it: edit the code and watch the resultAdd to my profile

<p><a href="#bottom">Jump to the bottom</a></p>
<div style="height: 260px; background: linear-gradient(#eef3ff, #d8dfea)"></div>
<p id="bottom">You made it to the bottom! <a href="#">Back to the top</a></p>

Fetching data from other sites

fetch() works with public APIs that allow requests from any website. (In the developer world, that's an API that sends Access-Control-Allow-Origin: *.) Many weather, quote and game APIs do. If an API doesn't, the console shows a “CORS” error, and there's nothing your profile can do about it.

<p id="fact">Loading...</p>
<script>
  fetch("https://api.example.com/random-fact")
    .then(function (r) { return r.json(); })
    .then(function (data) { document.getElementById("fact").textContent = data.text; })
    .catch(function () { document.getElementById("fact").textContent = "Couldn't load a fact."; });
</script>

Keyboard controls

If you make a game with keyboard controls, the visitor needs to click on your profile once first so it gets the keyboard. Say so on the page (“Click to play!”).

Why it's built this way

Back in the day, letting people put JavaScript on their profiles was risky: one bad profile could take over the accounts of everyone who visited it. The sandbox fixes that. Your profile gets its own private corner of the browser, so your scripts can be as wild as you like without being able to touch anyone else's account.

That doesn't make anything goes. The Terms of Service still apply: no tricking, tracking or attacking your visitors.

Next up

Ready-made effects to copy: Cookbook »

« JavaScript Basics Cookbook »