An easy open source way to create nice-looking web pages for essays.

I have a new writing tool I'm working on and wanted it to be able to create beautiful essay pages like Medium. But Medium doesn't have an API. So I made an essay-viewer that does. ;-)

http://myword.io/

Now, I'm not a great CSS hacker. That's obvious. But all that's needed is a framework to get started. That's the idea.

I'm going to keep iterating. :-)

The Scripting News blog post announcing myword.io, a good place to post a comment.

1. Added dropshadows to the byline and description.

2. Added styles to make it look reasonable on a phone.

1. Made the description fixed height, so the body text always begins at the same vertical position.

2. Made the body text a little narrower and added to the line-height.

3. Show the version number in the upper-right corner of the page, in white.

Thanks to an excellent suggestion by Paulo Querido, myword.io now supports Markdown.

Here's a demo page, and the JSON source file is renders.

Here's how it works.

1. Markdown is off by default, you can turn it on by including "flMarkdown": "true".

2. Markdown only applies to the subs. The title, description, byline, etc are not processed.

3. When we generate the Markdown text from the JSON, we add two linefeeds at the end of every line. So every line is effectively a paragraph. Unless it has markup that makes Markdown think it's something else.

4. The CSS for Markdown needs work. I added one fix for <h4> but a lot more is probably needed to make it look great. Please, if you're good with Markdown, Bootstrap Toolkit (which is part of the environment) and CSS, take a look and see if you can improve.

A bunch of small changes, loose-end fixes.

1. If there's an error in the JSON, we put up a dialog saying so, along with a suggestion that you use the excellent JSONLINT site to find the error.

2. If it's been more than a day since an article was posted, instead of saying "By Mary Jones at Wednesday", we say "on Wednesday".

3. Before using any of the values in the JSON, be sure it exists.

4. You can change the title font and the body font. See the example JSON file for a clue.