Stellar Pages

Getting Started

Welcome to Stellar Pages

Stellar Pages is a publishing application that allows you to stylize and package your markdown projects into PDFs.

Settings Panel

  1. First, “Upload” the markdown documents in the order you’d like to display them.
  2. Next, update any missing images.
  3. Lastly, customize your document however you like and save. That’s it!

Stylizing Documents

On upload, all markdown is converted to HTML, which means you can stylize all of it with basic CSS. To get started, open the “Appearance” tab and start customizing your document.

p {
    color: #0099cc;
    font-size: 1.2em;
}

Recommended Tips:

  • Use generic selectors when styling such as p, h1, h2, img etc.
  • You can adjust pages with the .page class.
  • Use the @media print query to adjust hide items for print. Ex: @media print { .hide-for-print { display: none; } }. Note: This will not hide items in the previewer and if the item had margin or padding, it may still show up in the final PDF.
  • Use display: none to fully hide items from the previewer and the final PDF.
  • Custom fonts (Work in progress)
  • You can use CSS variables to adjust colors, fonts, and more see example below.
--paragraph-color: #ff9900;

p { color: var(--paragraph-color); }

Adjust Page Size

Page sizes are defined using using CSS. Using the Page Size dropdown under the “Appearance” tab will adjust the size of the rendered content to the selected size. While saving documents make sure to select the same size in the PDF print dialog.

NOTE: You’ll be limited to the page sizes that are supported by the browser’s print dialog and this may vary. Stellarpages defaults, to Letter format.

Page sizes and padding can be manually overrided by adding using the .page selector in the style panel and customizing as needed. This is useful if your browser offers page size options that differ from our defaults or you’d like to adjust the padding for the page.

.page {
    height: 4in;
    padding: .25in;
    width: 6in;
}

Rendering Documents as Pages

By default, markdown documents are not print-friendly. They are usually long, continuous documents. When you load a markdown document into Stellar Pages, content will automatically be split into pages. Only content rendered within each page will be included in the final PDF.

EXPERIMENTAL: Creating Manual Page Breaks

You can manually create a page split by inserting the following snippet in your markdown.

[page-end]

Images

When documents with images are detected, the image replacement modal will become useable. To use it, click on the image icon button and replace your images as needed. For browser safety reasons, documents with images will require additional user interaction and must be uploaded.

Learn about image handling

Photo from unsplash by Nirzar Pangarkar

Example Markdown syntax

![My example caption](./example-image.jpg)

Example Obsidian syntax

![[./example-image.jpg]]
![[./example-image.jpg|My example caption]]

Displaying a Page Title

Stellar Pages has limited frontmatter support at this time. To render a title in your document, simply prefix your markdown files with frontmatter:

---
title: My Custom Title
---

Saving Documents

Once you’re happy with your document, click the “Save” or use your browsers native print command such as cmd + p to export your document as a PDF. Feel free to customize your settings as needed. Below are some recommended settings for exporting your document.

  • Destination: Save as PDF
  • Pages: All or select a range of the pages you like. Ex: 1-2, 3, 5-6
  • Layout: Portrait is the only supported layout at this time.

More Settings

  • Margins: none as .page padding values determine margin.
  • Scale: Default is a great starting place.
  • Paper Size: The “Paper Size” dropdown should match the page size you selected in the “Appearance” tab for pages to properly render in the preview and print dialog.
  • Options:
    • Headers and Footers: Disabling is recommended for a cleaner document.
    • Background Graphics: enabling or disabling may hide or show certain types of content based on your document and styles applied. Double check the print preview before exporting.

Custom HTML Support

Stellar Pages supports custom HTML elements. You can add custom HTML elements to your markdown files and they will be rendered in the final PDF.

<div class="custom">
    <img src="https://micheal.dev/_astro/350zduino-1080x720.8642fdc7.webp" />
</div>

Clearing Documents

To fully reset all settings, just use the clear button.

Support

This product is in the early development stages and is a work in progress.

Troubleshooting

  • If your documents are overflowing, try switching tabs and then switching back to the “Render” tab.
  • If you’re linking to external images in your document, you may need to trigger a rerender once the content is loaded.
  • If you’re seeing inline warnings, such as “WARNING: The element “DIV” is too large when rendering to the page. Please reduce the size of the element or split it into smaller elements.” you may need to either remove the element or make it smaller with CSS and re-render the document.

Privacy

When you upload a document, it does not leave the browser in which it was uploaded. We do not share, sell, or track your uploads.

The only data that is stored is the document itself, which is stored in your browser’s local storage & memory. All data rendered in the document previewer is handled clientside only. Only basics analytics are collected on this site.