# Elm-doc-preview: A new online documentation previewer

**URL:** <https://discourse.elm-lang.org/t/elm-doc-preview-a-new-online-documentation-previewer/2001>\
**Category:** Show and Tell\
**Created:** [September 18, 2018, 9:13pm UTC](https://discourse.elm-lang.org/t/elm-doc-preview-a-new-online-documentation-previewer/2001 "2018-09-18T21:13:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [September 18, 2018, 9:13pm UTC](https://discourse.elm-lang.org/t/elm-doc-preview-a-new-online-documentation-previewer/2001/1 "2018-09-18T21:13:08Z")

</div>

I made an online Elm 0.19 package documentation previewer:

[https://dmy.github.io/elm-doc-preview/](https://dmy.github.io/elm-doc-preview/)

It can preview `README.md` and `docs.json` files (one of them or both of them simultaneously).  
If you loaded both files, you can then update one of them without losing the other.

It is not yet perfect but hopefully it can already be useful. Feedback is welcome (here or in a [github repository](https://github.com/dmy/elm-doc-preview) issue).

### Notes:

- 0.18 packages are not supported.
- It is only an online service for now but I think that it would not be too hard to make it run locally, so if this is really important for you, tell me why and I will consider it (PRs are also welcome).
- Why a cat? Because they see better than us in the dark.

### Credits

- Using [elm/project-metadata-utils](https://package.elm-lang.org/packages/elm/project-metadata-utils/latest/) helped a lot, thank you @evancz 🖤
- It uses a copy of the `package.elm-lang.org` CSS, so thank you again for making this freely available

---

<div class="post-metadata">

**Author:** ![billstclair](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/billstclair/32/260_2.png) [@billstclair](https://discourse.elm-lang.org/u/billstclair)\
**Post date:** [September 18, 2018, 10:07pm UTC](https://discourse.elm-lang.org/t/elm-doc-preview-a-new-online-documentation-previewer/2001/2 "2018-09-18T22:07:26Z")

</div>

Thank you for doing this. I was considering doing it myself. Now I don’t need to. Bookmarked.

---

<div class="post-metadata">

**Author:** ![john-kelly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/john-kelly/32/69_2.png) [@john-kelly](https://discourse.elm-lang.org/u/john-kelly)\
**Post date:** [September 19, 2018, 3:36am UTC](https://discourse.elm-lang.org/t/elm-doc-preview-a-new-online-documentation-previewer/2001/3 "2018-09-19T03:36:34Z")

</div>

Thank you very much for this. Previous to this, I had to use a hacky locally cloned version of the [package website](https://github.com/elm/package.elm-lang.org).

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [September 20, 2018, 4:39pm UTC](https://discourse.elm-lang.org/t/elm-doc-preview-a-new-online-documentation-previewer/2001/4 "2018-09-20T16:39:55Z")

</div>

Update:

#### 1. Moved to Netlify

**elm-doc-preview** has moved to [Netlify](https://www.netlify.com/) (mainly because Github Pages SPA routing is a hack, even more without a custom domain). This is the first time I test Netlify and for now I am impressed.

The new URL is: [https://elm-doc-preview.netlify.com/](https://elm-doc-preview.netlify.com/)

The previous URL is redirected so bookmarks/links should not break.

#### 2. Previews should now be 100% identical to final documentation

After some thought, I now use the original viewer code from [package.elm-lang.org](http://package.elm-lang.org), so the preview should be exactly identical to the official documentation.

Also the same URL scheme as [package.elm-lang.org](http://package.elm-lang.org) is now used, so links to types and functions are now supported.

#### 3. Previews are now stored in local storage to support inter-modules markdown links

Previews are now stored in local storage (only the last `README.md` and `docs.json` loaded) to work around a [limitation of `elm-explorations/markdown`](https://github.com/elm-explorations/markdown/issues/1) that lead to page reloads when links inside markdown are clicked.

Consequently there is now a “Close Preview” link to close the preview and clear the local storage.

#### 4. Drag & Drop

You can now drop `README.md` and `docs.json` files anywhere in the page at any time.

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jwolondon/32/605_2.png) [@jwoLondon](https://discourse.elm-lang.org/u/jwoLondon)\
**Post date:** [September 20, 2018, 6:14pm UTC](https://discourse.elm-lang.org/t/elm-doc-preview-a-new-online-documentation-previewer/2001/5 "2018-09-20T18:14:13Z")

</div>

This is really useful and makes checking complex documentation much easier. I like the fact that it renders images as they appear on the official doc pages. Previously the Elm 0.18 doc preview would handle images larger than the 600px column width differently to the final version on the official published doc. This was the cause of too many patch releases for me until the published rendering worked as expected.

Thanks so much for putting in the time to do this.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 30, 2018, 6:14pm UTC](https://discourse.elm-lang.org/t/elm-doc-preview-a-new-online-documentation-previewer/2001/6 "2018-09-30T18:14:17Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.