-
Notifications
You must be signed in to change notification settings - Fork 310
Clockwork V2 Dev Guide
This page is a work in progress! Info may change or be inaccurate, so be ready.
Apps work by simply embedding a webpage inside Clockwork. Apps are written in JSON and are really easy to make:
{
"name": "Example",
"desc": "An example app",
"url": "urlhere.com",
"encodedUrl": "no",
"icon": "https://redstone-nw.netlify.app/assets/icon.png",
"author": "You",
"version": "v1.0.0",
"finderTerms": ["term","cool","epic"],
"permissions": []
}The name of your app.
A short description. Required for apps on the Clockwork app store.
The url to the app.
If encoded with ClockworkEncode (found in Settings > Developer Tools) set to true/yes, otherwise set to false/no
The url to the icon image. Images should be square.
The creator of the app. This is required to be your username if uploading to the Clockwork app store.
The version of your app.
An array containing alternative searchable text for the Finder tool.
Add permissions here. If not given, it will give no permissions. Valid permissions are:
notifications - allow sendNotification(), addPanel(), editPanel(), deletePanel(), getPanels() [IN DEVELOPMENT]
installApp - allow installApp()
installTheme - allow installTheme() [IN DEVELOPMENT]
changeSetting - allow changeSetting() [IN DEVELOPMENT]
unsafePermissions - allow unsafeEval(), factoryReset(), installPlugin() [IN DEVELOPMENT]
Clockwork has lots of cool functions for apps to use, but you might be wondering how you're supposed to be able to use them. Well, we've made a JS library which will hopefully make your life way easier. To add it to your app, put one of theses in the <body> element.:
<script src="https://cdn.jsdelivr.net/gh/red-stone-network/clockwork@latest/tools/clockwork.js"></script><script src="https://allgit.rk1.us/gh/red-stone-network/clockwork@main/tools/clockwork.js"></script>To start, you'll need to create a new Clockwork communicator:
const cw = new Clockwork()Then, you can use all the functions of Clockwork from there (if your app has the permissions for it).
const cw = new Clockwork();
if (cw.isEmbedded) {
cw.installApp("https://example.com/app.json");
} else {
alert("You aren't using Clockwork!");
};NOTE: cw.isEmbedded cannot tell if it is embedded in Clockwork or another website.
const cw = new Clockwork();
if (cw.isEmbedded) {
cw.sendNotification(prompt("Type a message."));
}There's plenty more you can do with clockwork.js! You can look here for a full documentation.
- Try to host the icon for your app on the app's website, so users can know if it's blocked without having to download it
- Make your apps accessible to users! We have users with dyslexia and colorblindness, and having features that make your apps easier to use for these groups does wonders for both your app and Clockwork.
- Don't host your apps on Replit. Replit is a steaming pile of garbage for Clockwork apps most of the time - use Glitch, Render, Cyclic, Railway, or literally anything else.
The website that you're hosting the .json file of your app on are not giving the correct Content-Type headers. Make sure it's set to application/json, or if you don't know how to do that, try hosting it one one of these services:
JSDelivr (through github repo)
- Try purging the cache of the clockwork.js script here if you're using JSDelivr.
- Try removing and re-adding the
scripttag for clockwork.js. - If that doesn't work, ask for help in the Discussions tab or in the Discord.
Clockwork © 2022 Redstone Network