Documentation

What it is (and why it exists)

DFStaticStatus is a simple update feed built specifically for static websites, inspired by status.cafe. If you use a host that doesn't allow PHP or databases (e.g. neocities or nekoweb), you usually have to edit your HTML manually every time you want to post. This tool gives you a "control panel" to manage updates easily without any server-side code! ✨

1. How to use

Since JavaScript can't actually edit files on your server (security and all that), you'll use the manage-statuses.html file as your personal control panel:

1 Open manage-statuses.html to write, edit, or delete your posts.

2 Copy the generated JSON code and upload it to your host as statuses.json.

Moving from status.cafe? Use the importer.html tool first to convert your history into a format this script understands.

2. Work smarter, not harder

By default, the script remembers the last URL you used to fetch your statuses.json file.

That's already a time-saver! But if you want it to 'just work' on all your devices without re-entering the link, you can hardcode it at the bottom of the manage-statuses.html file.

<script>
  /**
   * DFStaticStatus Config
   * Change the path to your statuses.json file here.
   */
  DFStaticStatus.initEditor('add', {
    jsonPath: '', // set path to your statuses.json file here
        
    // keep the rest of the config block as is!
  });
</script>

3. Displaying statuses

Heads up for local testing: You may see an error like "Error loading status." when testing it locally on your computer. This happens because browsers block local fetch requests for security reasons. Everything works perfectly if you run the files through a local server like XAMPP, Laragon, or when hosted online! And if it doesn't, hit me up! <3

Paste these snippets anywhere on your site (like your index.html) to show your feed.

Latest status only (e.g., for a sidebar):

<div id="status"></div>
<script src="DFStaticStatus.js"></script>
<script>
  DFStaticStatus.init({ 
    path: 'statuses.json', 
    selector: '#status' 
  });
</script>

Archive (all existing posts):

<div id="statuses-archive"></div>
<script src="DFStaticStatus.js"></script>
<script>
  DFStaticStatus.loadArchive({ 
    path: 'statuses.json', 
    selector: '#statuses-archive',
    perPage: 5
  });
</script>

CSS selectors

You can style your posts by adding these classes to your CSS:

.status-container { /* Main container box */ }
.status-header { /* Top area (date/emoji) */ }
.status-face { /* The emoji/face */ }
.status-time { /* The timestamp */ }
.status-content { /* The text content */ }

This is a basic sample default styling:

.status-container {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px;
  color: #333;
  margin-bottom: 5px;
}

.status-header { 
  border-bottom: 1px solid #ccc;
  padding-bottom: 3px;
  margin-bottom: 5px;
  font-size: 8pt;
  color: #777;
}

/* Pagination Styling */
.status-pagination {
  margin-top: 20px;
  font-family: inherit;
}

.status-pagination a {
  text-decoration: none;
  background: #9185da;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
}

.status-pagination a:hover {
  opacity: 0.8;
}

.page-info {
  color: #666;
}

FAQ

Can I create statuses.json manually?

Yes, technically you can write or edit statuses.json by hand. The file is plain JSON.

However, JSON is extremely strict. A single missing comma, quote, or bracket will break the entire feed and cause nothing to load. For this reason, using manage-statuses.html is strongly recommended. It always generates valid JSON and prevents formatting errors.

If you do choose to create the file manually, it must follow this exact format: 

[
 {
   "face": "✨",
   "content": "Hello world! This is my first status post.",
   "date": "2025-12-19T23:52:46+01:00"
 }
]

The date value uses a standard timestamp format: YYYY-MM-DD for the date, T to separate date and time, HH:MM:SS in 24-hour time, and a timezone offset at the end.

Your current timezone offset is:

You normally do not need to worry about this. manage-statuses.html always generates the correct value automatically.

It doesn't read my empty JSON file?

JSON files can't be 100% empty or the script will get confused. If you want to start fresh without any posts, your statuses.json file needs to look like this:

[]

Think of those brackets as an empty box. The script needs the box to exist so it has somewhere to put your posts later! If the file is totally blank, the script won't recognize it as a valid list.

What if my host blocks the "Fetch"?

If your editor fails to auto-load the JSON from your server URL, just use the "Upload file" button in the editor. Select your statuses.json from your computer, and the editor will read it locally.

Is this safe without a login?

Yes. It's purely client-side. No one can change your statuses unless they have access to your server's files (via FTP or your host's dashboard).