# FAQ

> Honest answers about contenteditable, the desktop app, what a save sends, the extra attributes, React, and external APIs.

Source: https://clayjs.com/docs/faq/

Honest questions, honest answers.

## Isn't this just contenteditable plus a POST?

Mostly, yes. contenteditable has been in browsers for twenty years, and the save is one POST of the whole document. The news is what is missing: no format of its own, no export step, no cloud in the loop. Double-click a file, edit it like a document, and the exact HTML you were looking at is written back to the same file, clean enough to read. clayjs earns its keep on the unglamorous parts, a clean serialize with the runtime junk stripped, form state written into the markup so a checked box survives, autosave that settles instead of spamming, a warning before you close unsaved work, but the core is as simple as you suspect. That simplicity is the point.

## A desktop app is a bigger ask than a script tag

It is. But a web page cannot write to your disk; the sandbox is the one rule this idea cannot cross, so a native process has to do the writing. HTML Clay is deliberately small about it: 4 to 9 MB, no account, and it only ever writes inside your home folder, into the file you opened or a folder you explicitly trust. It also brings more than the pen: every file it opens gets automatic version history, a local program can work on the file through the wire, and an edit made in your text editor or by an agent can merge into the open page with no reload at all. That last one is the `sync` plugin rather than the default, so it wants `clay.js?plugins=sync`; the four steps above stay on a plain reload. The full list is at [htmlclay.com/features](https://htmlclay.com/docs/features/). If you'd rather install nothing, [hyperclay.com](https://hyperclay.com) hosts the same files, saved to their disk instead of yours.

## What actually gets sent when it saves?

The whole file. The entire document, serialized as HTML and POSTed as plain text to the local app. There is no hidden project format and no sidecar files: what lands on disk is the same kind of HTML you would write by hand. `clay.getHTML()` returns the exact string.

## View source shows attributes I didn't write

Two, one stays. When HTML Clay serves your file it puts two attributes on `<html>`: `htmlclaytoken`, a per-serve save credential, and `htmlclayid`, a durable identity for the file. clayjs adds `savestatus` while it works. Before anything is written to disk, `htmlclaytoken` and `savestatus` are stripped. `htmlclayid` is kept: it is how the app still recognizes the file after you rename or move it. So the browser shows three attributes you didn't write, and the file on disk gains exactly one.

## Can I use React on it?

Yes, you can include React or any other JavaScript library directly in your HTML file. However, Hyperclay is designed to work without frameworks. The DOM itself becomes your component system through patterns like template-cloning. Many developers find they don't need React's complexity when the entire application fits in one file and the DOM naturally handles state.

```html
<!-- Using React (works but often unnecessary) -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- Hyperclay's approach (simpler for most cases) -->
<div task>
	<span contenteditable>Task content</span>
	<button onclick="this.closest('[task]').remove()">Delete</button>
</div>
```

## Can I use external APIs and services?

Yes. Hyperclay apps can fetch data from any CORS-enabled API:

```javascript
// Fetch weather data
const weather = await fetch('https://api.weather.com/...');

// Save to a backend service
await fetch('https://your-backend.com/save', {
	method: 'POST',
	body: JSON.stringify(data)
});

// Use function-as-a-service
const result = await fetch('https://api.val.town/v1/run/...');
```

**Using fetch for API calls:**

```html
<script>
async function loadData() {
	const response = await fetch('https://api.example.com/data');
	const data = await response.json();
	document.getElementById('content').innerHTML = data.content;
}
</script>
```

**Function-as-a-Service integration:**

Services like Val.town let you add backend functionality without managing servers:

```html
<script>
// Call a Val.town function
async function processData() {
	const response = await fetch('https://api.val.town/v1/run/yourname.yourfunction');
	const result = await response.json();
	// Use the result in your app
}
</script>
```

**CORS considerations:**

When integrating external services, ensure they support CORS or use services designed for client-side access.