Demo page for parsing HTML data back to a json file after edits

( I split the below from the original thread as this part was off topic. )

The premise of this is to allow an owner of a page I made for them to update some areas of information.
The Info/data is loaded into their webpage using a json file.

Doing pages like that can make them dynamic in content but there needs to be a way for the owner/client to edit their own content so I do not have to.

There are systems out there that can do this for you/them. Some probably are free!.
Some probably come with the client control panel…

But I do not want to use them… I wanted to see if I could just write a relatively simple page that they could:

Load the live data from their site.
Update /delete/add data /entries in an easy to understand way on the edit page
Preview changes.
Save the changes to a new json file.

They then just need to put the json file in it’s folder on there server along with any new images and the like.

So this is just to show it can be done.

The demo page is tailored for my uses. And the code I used also. But not the core of it.
The demo also relies on a certain format to the json file. i.e simple.

The data on the demo page is loaded into dynamically created tables.

At soe point I may post a core coded version that just does the parsing back and forth so others and adapt it for their own use.

The thing I like about this is as long as the json file structure stays the same I can add new data items, change most of their names and they should just be picked up.

Also I can just put this page on their site and the only logging I have o worry about is them to their ftp sever. Which they can do already.

1 Like

I went with this.

Then all I need to do to get everything back is just dump all the files in an appropriately name .hyperesources folder along with the restore file.

Just tested this and worked a treat.

Glad you may look at that at some point…

I am in the middle of building a simple Page where a user/client could load a json file into an editable form type page. Make changes /add/delete and then save the new json back down to local disk where they can put it up to their server replacing the original.

The goal of this is, I already use requests to parse a json file that contains data for the hype project externally.

But need a simple way for the user/client of the page to be able to change/add/delete text. etc… without having to understand how to open and write a json file with correct syntax.

(at this stage it does not need to be anything in the realms of a real content manager.)

Initial test going well.

As seen in this demo page

1 Like

Quite cool! Over time examples like this really help flesh out how we’d go about a Hype-based solution that can be both human editable and programmatically driven.


I’ve update the demo above.

It’s more dynamic reading the json objects. Deals with colour changes using my Colour Picker I wrote the other day.

There is css that controls a lot of the appearance. (looks pretty )

My main final bit to do is implement a add or remove for a group object.

Also I am going to have a preview.
My idea for that is I have a preview button that opens the real web page but with a anchor # at the end of the address.

I will change the function that parses the json on the real webpage to check if the location has something like #demopage if it does then it will fetch the new json file instead of the one on the server.

1 Like

The demo page is pretty much don now…

It now

Loads the live data from their site. Or local backup file.

Update /delete/add data /entries
Load corresponding named images that user wants to test against
Preview changes.
Save the changes to a new json file.


Works well just gave it a quick run through - nice job! Looking forward to spending more time on it.

1 Like

puh, the effort seems really big! :slight_smile:

when i set up reuseable exports, i always rely on jsonfiles cause the effort to programm a GUI is a big overload. though … it’ll be great to have kind of a modular system to create those kinds of frontend.

great work! … and so much to consider :slight_smile:

1 Like

So hopefully last version in relation to behaviour of this demo is now up on the demo page


Loads the live data from their site. Or local backup file.

Update /delete/add data /entries
Load corresponding named images that user wants to test against
Preview changes.
Save the changes to a new json file.

(new) sort order buttons for each table These allow you to push the entry down or up in the entry hierarchy.
Which will be reflected when the file is exported.

(new ) scroll follow moving entry when re sorted using the sort buttons.
(new) scroll to new added entry.
(new) quick highlight flash showing sorted or added entry.
(new) Table Position is now not editable and is controlled by the code when loading/deleting/adding & sorting.

Just to add , this demo is just showing proof of concept but I may post a cut down version of this project ( if I get time… ) as much is tailored to my needs and the code is not really tidy enough for public consumption as I am a organic code writer.

I must say I had a lot of fun making this page. And learnt some nice tricks that I hope to share in more detail… ( again time…)


Hey @MarkHunte would love to see a simplified version of this, got some good stuff going on there which would simplify things for us in terms of (re)usability.

@jonathan has there been any more conversations about building some sort of data-driven element into Hype? This would be amazing! I know some tools like webflow have this and simplify workflow massively.

In the mean time, @MarkHunte and @MaxZieb would there be any mileage in creating a ‘simple’ extension for loading external data (json etc) and exposing entries in js in an easy way?

1 Like

Nice thread I wasn’t aware of. Nice work @MarkHunte!

Also, a good read on working with JSON locally…

1 Like

Thanks both,

Gosh, I never got around to making simple one, I think the main reason was there is enough example s on gathering json entries, parsing info back to json and writing out files here and else where already.

And if I got into it ; it could rapidly become complex to explain. Adding all the tricks I did in above would make it even more so. A lot of it is outside of Hype scope.

But I will have another look and see if I can throw a simple example showing some of them, for pipes to break down. No promises…