Everything you need to know about using Artiefax—from adding your first app to managing persistent data, sharing with the world, and keeping your work secure.
Artiefax turns AI-generated code into real, running applications on your phone, tablet, or computer. No installation, no terminal, no configuration. You paste code from any AI tool, and Artiefax compiles and runs it instantly.
When you create or edit an app, you land on the editor page. Here's what each field does:
The editor's top bar has four actions:
docs-v8.html or my-budget-tracker.jsx.Tap any app in your library to open its detail modal, then tap Edit. The code editor opens with your app's source code. Make changes, save, and launch again. Your persistent data is preserved across edits—only the code changes.
The home screen gives you several ways to find and organize apps:
If you'd rather start with something pre-built, switch to the Essential Apps tab on the home screen. These are curated apps you can add to your library with one tap—games, productivity tools, and utilities. No AI or code required.
Artiefax supports three file formats. Every major AI code tool outputs at least one of them.
| Format | What It Is | AI Tools That Use It |
|---|---|---|
| JSX | React components using JavaScript. The most common format from AI tools. Supports Tailwind CSS, Shadcn, Recharts, Lucide, D3, and dozens of other libraries out of the box. | Claude, ChatGPT, v0, Cursor, Bolt, Lovable |
| TSX | The same as JSX but with TypeScript type annotations. Artiefax strips types during compilation, so JSX and TSX work identically at runtime. | Claude, v0, Cursor |
| HTML | A complete HTML document with inline CSS and JavaScript. Works with vanilla JS, jQuery, Chart.js, D3, and any library loaded via CDN. | ChatGPT, Gemini, Claude |
JSX and TSX files are compiled in your browser using Sucrase, a lightweight compiler that transforms React syntax into standard JavaScript. There is no server-side build step—everything happens locally, instantly. HTML files are injected directly without compilation. Both paths receive the Tailwind CSS CDN automatically.
When you paste code, Artiefax inspects the content to determine the format. Files containing JSX syntax and React imports are detected as JSX. TypeScript annotations trigger TSX detection. Documents that start with <!doctype or <html are detected as HTML. You can always override the auto-detected format using the format selector in the editor.
JSX and TSX apps have access to a wide range of libraries bundled into the Artiefax runtime. You do not need to install anything—just import and use them.
| Library | What It Does |
|---|---|
| Tailwind CSS | Utility-first CSS framework. Available in all formats automatically. |
| Shadcn/ui | Pre-built React UI components (buttons, dialogs, inputs, cards, and more). |
| Recharts | React charting library for line, bar, area, pie, and scatter charts. |
| Lucide | Icon library with hundreds of clean, consistent SVG icons. |
| D3 | Low-level data visualization and DOM manipulation. |
| Three.js | 3D graphics and WebGL rendering. |
| Chart.js | Canvas-based charting (alternative to Recharts). |
| Papa Parse | CSV parsing and generation. |
| SheetJS | Read and write Excel files (XLSX, XLS). |
| mathjs | Math expression parsing, symbolic computation, and matrix operations. |
| lodash | Utility functions for arrays, objects, strings, and more. |
| Tone.js | Web audio framework for synthesizers, effects, and scheduling. |
| jQuery | DOM manipulation (primarily for HTML-format apps). |
HTML-format apps can load any library via CDN using a <script> tag, so their library support is effectively unlimited.
Artiefax currently supports single-file apps only. Multi-file projects (separate component files, CSS modules) are planned for a future update. On the framework side, Vue and Svelte support are planned but not yet available. Lit components (sometimes generated by Google Gemini) work partially via CDN fallback but don't have dedicated compiler support. Server-side frameworks like Python, Streamlit, and Gradio are fundamentally incompatible with Artiefax's client-side architecture and are not on the roadmap.
export default.Artiefax gives every app its own isolated storage space. Data you save persists between sessions—close the app, restart your phone, come back days later, and everything is right where you left it. If you're signed in, your data syncs across all your devices automatically.
Each app gets a private namespace in your browser's database. Apps cannot read each other's data. When you're signed in, writes are synced to the cloud in the background—the app doesn't wait for the sync to complete, so it always feels instant. If you're not signed in, storage works locally and behaves identically, just without cross-device sync.
Artiefax provides two equivalent APIs. Both are injected automatically into every app—you don't need to import or install anything.
await artiefax.storage.get(key) // Returns the value as a string, or null
await artiefax.storage.set(key, val) // Stores a string value
await artiefax.storage.delete(key) // Removes a key
await artiefax.storage.list(prefix) // Returns an array of matching key names
await artiefax.storage.clear() // Removes all data for this appawait window.storage.get(key) // Returns { key, value, shared } or null
await window.storage.set(key, value) // Stores a value
await window.storage.delete(key) // Removes a key
await window.storage.list(prefix) // Returns { keys, prefix, shared }The window.storage shim exists because Claude generates artifacts that use this convention. Both APIs route to the same underlying storage—use whichever your AI tool produces. If you're writing code manually, artiefax.storage is preferred because it's explicitly namespaced.
All storage calls are asynchronous—always use await. Values must be strings, so use JSON.stringify() when saving objects and JSON.parse() when reading them back. Use descriptive key names prefixed with your app's concept (for example, tracker_entries or quiz_best_score) rather than generic names like data or state.
When asking an AI tool to add persistence to your app, use this detection and normalization pattern. It works regardless of which API is available at runtime:
function getStorage() {
if (typeof artiefax !== "undefined" && artiefax.storage) return artiefax.storage;
if (typeof window !== "undefined" && window.storage) return window.storage;
return null;
}
async function safeGet(key) {
try {
const api = getStorage();
if (!api) return null;
const result = await api.get(key);
if (result == null) return null;
const raw = typeof result === "object" && result.value !== undefined ? result.value : result;
return JSON.parse(raw);
} catch { return null; }
}
async function safeSet(key, value) {
try {
const api = getStorage();
if (!api) return;
await api.set(key, JSON.stringify(value));
} catch {}
}Persist: scores, currency, progress, user preferences, roster data, high scores, current page or step in multi-step flows, in-progress answers, active filters, bookmarks, and theme choices.
Don't persist: modals open/closed, hover states, animation frames, scroll position, validation errors, or loading flags. These are transient and should reset each session.
If data isn't saving or loading as expected, check these common causes:
await—every storage call is asynchronous. If you forget await, the call fires but your code continues before the result arrives, which can cause reads to return null and writes to appear lost.localStorage or sessionStorage—these browser APIs are not available inside the Artiefax sandbox. Apps that try to use them will get errors or silent failures. Use artiefax.storage or window.storage instead.Artiefax is a Progressive Web App (PWA), which means you can install it on your phone's home screen and use it like a native app—full screen, with its own icon, and available offline. Many AI-generated apps are designed for desktop-width screens, though, which can make them hard to use on a phone. Artiefax has tools to address this.
When Artiefax detects a non-responsive HTML document running on a narrow screen (phone or small tablet), it automatically renders the app at a desktop width and scales it down using a CSS transform. This means the layout stays intact rather than overflowing off-screen—everything is just smaller. JSX apps built with Tailwind are typically responsive already and are left alone.
The Optimize for Mobile AI button (the wand icon in the code editor) rewrites your app's layout to work on small screens. It adds responsive breakpoints, restructures grid layouts into stacked columns, scales font sizes, and adjusts touch target sizes—all without changing your app's functionality or visual identity.
Installing Artiefax on your home screen gives you full-screen access, an app icon, and offline support. The steps depend on your device:
iOS (iPhone / iPad):
Android (Chrome):
Safari on iOS caches aggressively, which can occasionally cause the PWA to show old content after an update. If this happens:
If the PWA still shows stale content after clearing website data, remove it from your home screen entirely (long-press the icon → Remove App) and re-add it using the installation steps above.
Any app in your library can be shared with a single link. The person receiving the link doesn't need an Artiefax account—they open it in a browser and the app runs immediately.
Open any app's detail modal and tap Share. Artiefax generates a unique link that you can copy and send to anyone. You must be signed in to create share links.
Pro subscribers can set a password when creating a share link. Visitors must enter the password before the app loads. Passwords are hashed securely—Artiefax never stores your password in plain text. The password is shown to you once at creation; after that, it cannot be retrieved.
Shared apps support two data modes:
Visitors see a clean, full-screen experience—no Artiefax navigation, no launcher UI, just the app itself. If you set a password, the viewer sees a password prompt first. On free-tier accounts, a small dark footer bar with "Powered by Artiefax" and a link to artiefax.app appears at the bottom of shared pages. Upgrading to Pro removes this branding entirely.
You can disable a share link at any time from the share settings. Disabling it immediately prevents anyone from accessing the shared app. You can also re-enable it later—the same URL resumes working.
Artiefax includes built-in AI features that modify your app's code using Claude. These are accessed via the wand icon in the code editor.
Analyzes your app's code, identifies what state should be saved between sessions, and adds the storage API calls automatically. Your existing code is not restructured or reformatted; only the necessary storage logic is added.
Rewrites your app's layout to be responsive on small screens. Adds media queries, converts fixed-width layouts to flexible ones, adjusts font sizes and spacing, and enlarges touch targets. Functionality and visual identity are preserved.
AI features consume tokens from your account. Free accounts receive 10,000 tokens per month. Pro accounts receive 50,000 tokens per month. Tokens reset on the first of each month. A typical request uses between 1,000 and 4,000 tokens depending on the size of your app's code. You can check your current usage in Settings.
AI transforms perform best on small to medium apps—roughly under 500 lines of code. The AI reads your entire file, understands the component structure and state flow, and makes targeted, surgical changes. For most apps generated by AI tools like Claude, ChatGPT, or v0, the transforms work on the first try.
Very large files (1,000+ lines) may cause the transform to take a long time or not complete at all. Complex interdependent state logic can also produce unexpected results. If this happens, try simplifying the file first—break complex logic into smaller pieces, or remove sections that don't need the transform—and then retry.
Your original code is never modified until you explicitly tap Save. If the AI output doesn't look right, tap Back or close the editor without saving. Your app is completely unchanged. You can always retry the transform, or undo the AI's changes and try a different approach.
The Essential Apps gallery is a curated collection of pre-built apps available from the home screen. It's designed to give new users something to explore immediately without needing to generate code first.
Switch to the Essential Apps tab on the home screen to browse the gallery. Tap any app to see its description, then tap Add to My Library to clone it into your personal library. The app is now yours—you can launch it, edit its code, add persistence, or share it.
When you add an Essential App, you receive a full copy of the source code at that point in time. Your copy is completely independent—if we update the original later, your version is unaffected.
The gallery currently includes:
More apps are added over time.
Artiefax runs third-party code—artifacts generated by AI tools—so security is a foundational concern, not an afterthought. Every design decision prioritizes isolating untrusted code from your personal data and from other apps.
Every app runs inside a sandboxed iframe on a completely separate domain from the Artiefax host application. An app's code cannot access the host's cookies, authentication tokens, local storage, or DOM. The browser enforces this separation at the engine level—it is not a software-only restriction.
The Artiefax host application enforces strict Content Security Policy headers that limit which scripts can execute, which domains can be contacted, and what resources can be loaded.
Each app's persistent data is stored in a private namespace. There is no API for one app to read another app's storage. Even if an app tried to craft its own storage requests, the host enforces the namespace boundary.
Apps cannot download files, open external links, or display attachments without your explicit permission. When an app requests one of these actions, Artiefax shows you a prompt with the specific filename or URL involved. You approve or deny each request individually. URLs are validated and filenames are sanitized before any action is taken.
If you're signed in, your apps and data are stored in a cloud database with row-level security policies. No other user can query, read, or modify your data. Authentication uses industry-standard OAuth providers (Google, GitHub, Microsoft) as well as email/password.
Artiefax runs code generated by AI tools. While the sandbox prevents apps from accessing your personal data or interfering with other apps, you should still review what you paste—especially if the code comes from a source you don't trust. If an app behaves unexpectedly, you can close it immediately and delete it from your library.
Artiefax works without an account—you can paste and run apps locally with no sign-up. Creating a free account unlocks cloud sync, sharing, and AI tools. Sign up with Google, GitHub, Microsoft, or an email address.
| Feature | Free | Pro ($4.99/mo) |
|---|---|---|
| Saved apps | 5 | Unlimited |
| Cloud sync | Yes | Yes |
| Share links | 2 active | Unlimited |
| Password-protected sharing | No | Yes |
| Branding on shared apps | "Powered by Artiefax" footer | No branding |
| AI tokens (monthly) | 10,000 | 50,000 |
| Storage per app | 1 MB | 50 MB |
Tap Settings (gear icon) in the top-right of the app, then tap Upgrade to Pro. You'll be redirected to a secure Stripe checkout page. After payment, your account is upgraded immediately.
Go to Settings and tap Manage Subscription. This opens the Stripe Customer Portal where you can cancel. Your Pro features remain active until the end of your current billing period. After that, your account reverts to the free tier. Your apps, data, and share links are all preserved.
You own your data. Every app in your library can be exported as a source code file using the Export button in the editor's top bar.
For general questions, feedback, or help, email contact@artiefax.app. For security-related reports, email security@artiefax.app.
Check that the format is set correctly in the editor. A JSX file set to HTML (or vice versa) will fail to compile. JSX and TSX files also require a default export—make sure your main component includes export default. If the format looks correct, try copying the code into a fresh new app to rule out a corrupted save.
Safari on iOS caches aggressively. If the app appears stuck on an old version, open your device's Settings → Safari → Advanced → Website Data, search for "artiefax," and delete all matching entries. Then reopen the PWA from your home screen. If the problem persists, remove the PWA from your home screen entirely (long-press → Remove App) and re-add it.
Check your token usage in Settings. Free accounts receive 10,000 tokens per month, and Pro accounts receive 50,000. Tokens reset on the first of each month. If you've reached the limit, wait for the reset or upgrade to Pro for a higher allowance.
Very large files may exceed the processing window. Try simplifying the file—remove sections that don't need the transform, or break complex logic into smaller pieces—and retry. Each transform attempt can be discarded without affecting your saved code.
Make sure all storage calls use await. Do not use localStorage or sessionStorage—these browser APIs are not available inside the Artiefax sandbox. Use artiefax.storage or window.storage instead. If data appears to be lost, check that your app isn't overwriting stored values with defaults on startup—always load existing data before saving.
The link may have been disabled by the owner. If you're the owner, check the share settings in the app's detail modal—you can re-enable a disabled link at any time. If the link was never disabled and still isn't working, try generating a new share link from the same app.