Pro Coding Studio API Reference

This page provides a complete, professional reference for all available APIs, how to use them, and how to create extensions for Pro Coding Studio.

File System APIs

API	Description	Example Usage
`host.fs.openDocument()`	Opens file picker, returns file info (name, uri, size, etc.)	`await rpc('host.fs.openDocument')`
`host.fs.openDocumentTree()`	Opens folder picker, returns folder URI	`await rpc('host.fs.openDocumentTree')`
`host.fs.listFiles({directoryUri})`	Lists files in a folder (array of file info)	`await rpc('host.fs.listFiles', { directoryUri })`
`host.fs.getFileInfo({uri})`	Gets metadata for a file (name, size, type, etc.)	`await rpc('host.fs.getFileInfo', { uri })`
`host.fs.readFileText({uri})`	Reads file as text (returns { content })	`await rpc('host.fs.readFileText', { uri })`
`host.fs.writeFileText({uri, content})`	Writes text to file (returns { ok })	`await rpc('host.fs.writeFileText', { uri, content })`
`host.fs.readFileBytes({uri})`	Reads file as base64 (returns { bytes })	`await rpc('host.fs.readFileBytes', { uri })`
`host.fs.writeFileBytes({uri, bytes})`	Writes base64 to file (returns { ok })	`await rpc('host.fs.writeFileBytes', { uri, bytes })`
`host.fs.createFile({directoryUri, fileName, mimeType})`	Creates a new file (returns file info)	`await rpc('host.fs.createFile', { directoryUri, fileName, mimeType })`
`host.fs.createDirectory({directoryUri, folderName})`	Creates a new folder (returns folder info)	`await rpc('host.fs.createDirectory', { directoryUri, folderName })`
`host.fs.deleteFile({uri})`	Deletes a file (returns { ok })	`await rpc('host.fs.deleteFile', { uri })`
`host.fs.extractZip({zipPath, targetDirectoryUri})`	Extracts ZIP to folder (returns { ok })	`await rpc('host.fs.extractZip', { zipPath, targetDirectoryUri })`

Editor APIs

API	Description	Example Usage
`host.editor.getActiveDocument()`	Gets info about the open file in the editor (name, uri, isDirty)	`await rpc('host.editor.getActiveDocument')`
`host.editor.openDocument({uri})`	Opens a file in the editor by its URI	`await rpc('host.editor.openDocument', { uri })`
`host.editor.getCurrentContent()`	Gets current editor text (returns { content })	`await rpc('host.editor.getCurrentContent')`
`host.editor.setContent({content})`	Replaces editor content with provided text (returns { ok, length })	`await rpc('host.editor.setContent', { content })`
`host.editor.saveActiveDocument()`	Saves the open file (returns { ok })	`await rpc('host.editor.saveActiveDocument')`

Device & System APIs

API	Description	Example Usage
`host.device.info()`	Gets device info (brand, model, sdk, device)	`await rpc('host.device.info')`
`host.device.showToast({message})`	Shows a toast notification on the device	`await rpc('host.device.showToast', { message })`

How to Use the API

All APIs are called from extensions using the rpc helper over the ProCodingHost JS channel. Here is a recommended helper function and sample usage:

function rpc(method, params = {}) {
  return new Promise((resolve, reject) => {
    const id = Math.random().toString(36).slice(2);
    const handler = (ev) => {
      const msg = ev.data;
      if (msg?.rpc_result?.id === id) {
        window.removeEventListener('message', handler);
        resolve(msg.rpc_result.result);
      } else if (msg?.rpc_error?.id === id) {
        window.removeEventListener('message', handler);
        reject(new Error(`${msg.rpc_error.code}: ${msg.rpc_error.message}`));
      }
    };
    window.addEventListener('message', handler);
    window.ProCodingHost?.postMessage(JSON.stringify({ id, method, params }));
  });
}

// Example usage:
// Show a toast
await rpc('host.device.showToast', { message: 'Hello from extension!' });

// Open a file picker
const file = await rpc('host.fs.openDocument');

// Read file text
const text = await rpc('host.fs.readFileText', { uri: file.uri });

// Open file in editor
await rpc('host.editor.openDocument', { uri: file.uri });

// Get current editor content
const content = await rpc('host.editor.getCurrentContent');

// Set new content in editor
await rpc('host.editor.setContent', { content: content + '\n// Added by extension' });

// Save the active document
await rpc('host.editor.saveActiveDocument');

How to Create an Extension

Design your extension panel: Create an HTML file (panel) that will be loaded in a WebView. This can be hosted remotely (recommended) or bundled as an asset.
Implement your UI and logic: Use standard HTML, CSS, and JavaScript. Add buttons, forms, or any UI you need.
Connect to the API: Use the rpc helper above to call host APIs from your panel. You can read/write files, control the editor, and show device notifications.
Publish your panel: Host your HTML file on a public URL (GitHub Pages, CDN, etc.).
Add to the Extension Store: Submit your extension's manifest (JSON) to the store catalog. The manifest should include: id, name, version, description, homepage (optional), and panels.
Test your extension: Open the Extension Store in Pro Coding Studio, allow the origin, and launch your panel. Use the sample code above to interact with the app.

Sample Manifest (JSON)

{
  "id": "my-extension",
  "name": "My Extension",
  "version": "1.0.0",
  "description": "A sample extension for Pro Coding Studio.",
  "homepage": "https://example.com",
  "panels": [
    {
      "id": "main",
      "title": "Main Panel",
      "url": "https://example.com/panel.html"
    }
  ]
}

Tips

Use async/await for all API calls.
Handle errors gracefully (catch and display messages).
Keep your UI simple and mobile-friendly.
Test on real devices for best results.
For advanced features, watch for new API releases.