SimpleHTML is a new tool for InDesign that exports bare naked HTML from a Text Frame or Story.
There’s no <head> or <body> tag, no classes, no <div> wrappers, no clutter—just the HTML that you need to paste into a blog post (or email) editor.
The Back Story
David Blatner and I were prepping for our Importing and Exporting HTML5 session at this year’s Creative Pro Week conference and discussing all the myriad ways that InDesign and HTML could possibly interact.
I knew from David’s session at PePcon last year that the team at InDesign Secrets has found it painstaking to repurpose articles from their magazine to their WordPress blog.
David told me that they export HTML from InDesign using InDesign’s built in export, but that they then have to open the file in a text editor and run several find and replace commands to clean up the code before pasting it into the WordPress post editor.
According to InDesign Secrets Editor-in-Chief, Mike Rankin, this manual cut-and-paste method takes at least 30 min per article! And he has about 600-800 articles from back issues waiting to be converted.
David and I agreed that it would be useful to have a tool that exported uncluttered HTML from InDesign that would not require clean up—and that it would be fun if we could show such a tool in our session.
Since I had already written a much more complex InDesign to HTML tool, in5—which also retains layout, animation, and interactivity from InDesign—I figured that I could borrow some code from in5 and build such a tool.
…And here it is!
SimpleHTML in Action
Here’s an image comparing the cleanest HTML that InDesign can output on the left (no CSS, selected text frame only) and SimpleHTML on the right.
The SimpleHTML is half as many lines and far more readable.
SimpleHTML exports no layout. It will only export the content of a Text Frame or Story (and any images, tables, and hyperlinks that are anchored inside).
It even removes the header (html/head/body) tags, so you can just copy/paste the whole thing into a WordPress story.
If you’re looking for a way to share a complex, interactive layout inside of a WordPress blog post, check out the in5 Embed Plugin for WordPress.
Using SimpleHTML
Once installed, you can access SimpleHTML from File > Export SimpleHTML…
- Export entire story – if the text frame is linked to others, this option will output the entire story as HTML.
- Auto-detect HTML tag names – will look for styles named similar to head1 (or h1 or heading_1) and make it a <h1> in the output, even if no export tags are set up in the Paragraph Style. Also looks for bolded and italicized text and tags it appropriately.
- Use <strong> and <em> instead of <b> and <i> – when checked, uses the modern semantic tags, otherwise uses the old tags.
- Insert placeholders for images – puts [-INSERT images/image-name.png HERE-] instead of <img src=”images/image-name.png”/>
to make inserting images in a WYSIWYG editor easier. In WordPress, you can drag-and-drop your images right into the placeholder locations.
…And once the export is done, there’s a convenient Copy to Clipboard button—so you don’t even have to open the exported file to get your code!
Start using SimpleHTML
Get my copy of SimpleHTML
Join the newsletter and get SimpleHTML
Sign up now and I'll send you the SimpleHTML installer.
As a subscriber, I also send you tips, tricks, and tools related to InDesign and HTML.
Looks damned good, anything that will make life easier is top notch to me! Cheers Guys! Glen
Fails for me with longer projects, the generated index.html is empty. For example is a document with one long primary text frame, anchored images that is set up for an reflowable ePub (Split at certain paragraph styles etc.).
Small articles work fine.
Hi Frans,
I hadn’t thought about this for longer projects, but would be happy to take a look at the file if you want to send it to me:
https://ajarproductions.com/pages/contact.php
Same issue for me! As a test I tried to export a typesetting job I’m doing at the moment a 286pp book, locked up for about 5 hours and produced an empty HTML file 🙁
Thanks for sharing the process to install, I am a new user Indesign, so I still have many things which I unknow.
It seems to be working fine, much better than the cluttered default option in cc2017, but I needed a text with footnotes and it fails to parse them, replacing the references with *.
Usually that’s exactly what I need in the clean html: bold, italics, footnotes 🙂
Might be able to add that in a future version. Would you want the footnotes at the end, or added in place?
Thanks for this great addon! Works like a charm for me – besides a small, but indeed important thing I think we won’t be the only users who are suffering from: Exporting text in german language will produce crypted types instead of Ä,Ö,Ü,ß … Is there any other workaround for using special characters / output of entities instead of search and replace afterwards inside the output HTML? Playing around with grammar / language settings of the text boxes did not do the job. Many thanks in advance!
Thanks for the note. I’ll see what I can do to include that improvement in the future.
Don’t know how popular this addon is but the requested feature would be great for all languages using special characters. Thanks for that!
Hi, can we embed complex html like a tableau data visualization? I can’t do it with the simple insert HTML to be seen in the adobe platform. I just purchased in5 with the hope that this is possible!
That’s not what this is designed for. If InDesign cannot handle the custom code, you might need some combo of a Insert HTML placeholder, and attaching in5 JS resources to dynamically replace the placeholder.