Edit the content of your static site in a shortcut

| 3 minutes read

Today I’d like to share a very useful tool named Instant (formerly Teletext.io)
As a front-end developer at ekito I regularly make landing pages for startups.
Landing pages are crafted to be very simple but attractive, static, mainly to collect emails and measure interest.

As we act very early, and startups by nature iterate, the wording of their message may evolve and things are moving quickly. Of course, the landing page must reflect these changes. To gain in autonomy for them and time for me, I regularly thought to have some kind of tool to edit the content. I wish I had this but without the hassle of a WordPress or other CMS that can be tricky to maintain or to change a simple label (and where we won’t break the design layout, luckily.)*

So, at first I came up with Dropbox. By storing a JSON formatted file in a public folder, I just could do a GET and display my data. Although this is pretty good for me, I was not doing this for me. Startups don’t necessarily have the tech background to strictly edit that important file. I finally discovered Instant thanks to @ndeverge.

Implement

Instant has a simple JavaScript snippet to include in your HTML head.
Next and last step is to make an editable area by adding the attribute data-txt into the tag.

1
<p data-txt="home.title">text overridden by value in home.title</p>

Here, we could say home is a collection and title a label.
What’s between the tag becomes optional.

Note that data-txt is for visible content, but you can also customize other page attributes such as alt, placeholder and content with data-txt-alt and so on…

You will have the possibility to edit and format your text, or even add images, Yes!

edit: They now have a more complete feature (in beta) for images.

Edit & publish

Typing the (Alt) +  + T, a discrete interface shows up.**

instant button

An example of landing page with instant implemented

You login with your Google account linked to your instant instance, then it will scan for editable area that you can now click on to display a formatting tool.

format your data

All changes are saved as draft before publishing.

Also, an alternative to inline editing is to edit values of your keys in the friendly JSON editing tool provided in the resources section.

list json resources    edit json resources

That’s it, click publish, reload the page to see your site updated.
Instant handles everything such as local storage and serverless architecture (AWS S3, Lambda functions, DynamoDB, Cloudfront CDN) to ensure you an extremely high availability of your data. You can read more about that here.

By the way, since Google is indexing Javascript, your “instant” content will be. 🙂

Conclusion

IMO, this is a nice way to quickly craft simple pages with specific design and give ability to non-developers to change their content. Despite this fact, so far we can’t say it is really used by the guys for whom we have implemented this in their website. And so, we are not sure yet about the real-life usage.
It seems that even though it is simple, they don’t brake “something” to edit the content by themselves. But this is not related to a tool weakness.
So what? Is it a developer illusion, a gadget? Do these people have been accustomed by CMS? The question still open is: Will it be used?

What do you think? Do you have other methods to share with us?

 

Mention to Marcel, the developer of Instant for his friendly support and reactivity on Slack.

* An interesting read about the problematic to deal with -or without- a CMS.

** If not, give a try to  Ctrl +  + T   or   Ctrl +  (Alt) + T

Share Button

Leave a Reply

Required fields are marked *.


CommentLuv badge