I've always wanted to try my hand at screenwriting, but I found them painful to format in traditional document editors. While there exists screenwriting software for this purpose, I don't feel like learning a whole new software. So instead, let's make a whole new software!

Here's the idea:

1. Write the screenplay in Markdown so that I can stick with a format I am used to
2. Convert the Markdown into HTML
3. Use CSS to style the HTML into a properly formatted screenplay
4. Convert the whole document (HTML + CSS) into a PDF

That is certainly easier said than done, but two open source projects will make this a lot easier for us:

• Eleventy, the static site generator, to convert the Markdown to HTML. This is probably overkill but I am more than used to working with Eleventy, so I'm fine to use it here.
• Paged.js, to convert our HTML output into a PDF. I've used this before as well and found it very helpful when it comes to using HTML and CSS for print.

The plan is to use headings 1-5 for various screenplay elements, block quotes for character dialogue, and regular paragraphs for scene descriptions.

I like this, as it leaves bold, italics, and links untouched, meaning they can be used wherever in the screenplay. We also have a spare heading (<h6>) if we need it down the line.

Eleventy is a static site generator that can convert template files, including Markdown, into HTML output. I'll spare you the details, as to get into them would turn this post into an introduction to Eleventy tutorial, but I highly recommend checking out Eleventy.

Once we create a new Eleventy project, we can write a simple script in markdown:

# CUT TO:

## INT. SKYSCRAPER - CEO'S OFFICE - DAY

The camera shows the back silhouette, illuminated by a computer screen, of a man in a chair with steaming coffee to his right and a stack of paperwork to his left. The light of the computer screen in front of the man is pure white and makes everything else dark. The man is wearing a headset with a microphone.

#### JOHN DOE

##### (into headset)

> Hold your horses there, Smith. We still have other options.

The camera slowly zooms onto the man, dimming the light and revealing an online group call on the computer screen, JANE SMITH among the call members.

### INTERCUT BEHIND COMPUER MONITOR

Camera shows back of computer monitor, dark, and the man's front, fully illuminated, with everything else dark.

Which right now, gives us the following HTML:

<h1>CUT TO:</h1>
<h2>INT. SKYSCRAPER - CEO'S OFFICE - DAY</h2>
<p>The camera shows the back silhouette, illuminated by a computer screen, of a man in a chair with steaming coffee to his right and a stack of paperwork to his left. The light of the computer screen in front of the man is pure white and makes everything else dark. The man is wearing a headset with a microphone.</p>
<h4>JOHN DOE</h4>
<h5>(into headset)</h5>
<blockquote>
    <p>Hold your horses there, Smith. We still have other options.</p>
</blockquote>
<p>The camera slowly zooms onto the man, dimming the light and revealing an online group call on the computer screen, JANE SMITH among the call members.</p>
<h3>INTERCUT BEHIND COMPUTER MONITOR</h3>
<p>Camera shows back of computer monitor, dark, and the man's front, fully illuminated, with everything else dark.</p>

false

false

This is already looking good, but we can make it better with some CSS.

This is where we will bring in Paged.js. Essentially, Paged.js allows us to design works for print using HTML and CSS, which is precisely what we need right now. Once again, check out Paged.js if this sounds interesting to you.

Paged.js also gives us a neat interface.css file that previews our HTML as a PDF right in the browser, which is great!

Anyway, now we can simply style our HTML accordingly, and we will have a fully formatted screenplay ready to be printed.

Paged.js makes this simple. We can simply just use the browser's print function (usually CTRL + P) to save the document as a PDF. And there we go!

If you're interested in using this yourself, you can download the project and try it out for yourself!

Using Eleventy, we're able to take advantage of a whole lot of other things. For example, the sample screenplay that comes with the project uses Global Data Files so we can use variables in our screenplay! For example, we can have a {{ characters.protagonist }} variable, so if we ever want to change the protagonist's name, we only have to change it in one spot.