Rope Pages

Rope Pages turns supported editor buffers into an interactive page inside Rope Notes. Buttons, event handlers, and DOM updates run in the preview. Edit the source, try the result, inspect console output, and revise without saving first.

The supported workflow compiles TypeScript locally with bundled tooling. It does not require a desktop connection, npm installation, or an external development server.

Create your first page

1. Create a project file named index.html on Android or macOS.
2. Paste this self-contained example.
3. Choose Split to see source and preview together, or Preview to give the result more space.
4. Tap the button, then change its text or styling in the editor. The preview updates after a short pause.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Rope page</title>
<style>
  body { font: 18px system-ui; padding: 24px; }
  button { font: inherit; padding: 12px; }
</style>
<h1>Try an idea</h1>
<button id="counter">Tapped 0 times</button>
<script>
  let count = 0;
  document.getElementById('counter').addEventListener('click', (event) => {
    event.currentTarget.textContent = `Tapped ${++count} times`;
    console.log('Count:', count);
  });
</script>
</html>

Rendering does not save the source. Save normally to keep your work.

Supported source and platforms

Open .html or .htm as the entry for JavaScript companions. A .js or .mjs tab is not a standalone preview entry. TypeScript, TSX, and JSX entries receive an empty <div id="app"></div> for mounting their result. Declaration files (.d.ts) are not preview entries.

On Android, keep assets below the entry HTML's directory and reference them with local paths. Open companion buffers take precedence over saved script text so you can iterate across unsaved files.

Scope and network access

Rope Pages is a local development surface. It does not provide arbitrary npm package resolution, framework development servers, server-side execution, or hosting. TSX and JSX use Rope's small DOM runtime; they do not include React or React hooks. Compilation does not replace TypeScript semantic type checking.

Self-contained pages can work offline. Network access is controlled by the workspace preview policy and explicit HTTPS origin grants where supported. Ext JS source preview uses the SDK's precompiled theme and does not compile application Sass.

Use Rope Session when you want a connected agent to inspect or edit the live source, and remote conversations to direct desktop work from Android.