StackEdit: A free, open-source Markdown editor based on PageDown

http://benweet.github.io/stackedit/#

by wqfeng • 13 years ago

160 57 13 years ago

benweet.github.io

Very slick. Nice touch adding the delay between scrolling and moving the other page. Your logo looks like StackOverflow's, is there a relationship between the two? Otherwise I'd consider changing it.

Also, the save/download buttons (the first thing I look for in an app like this) are hidden behind a sliding panel. Move them front and center!

bloometal• 13 years ago

I had the same question too. The footnote #1 states that >"StackEdit is a free, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites."

nathancahill2• 13 years ago

Based on the same library that another website uses doesn't warrant the use of a similar logo though. It was confusing to the point of "Oh look, a StackOverflow button, I wonder if it posts to StackOverflow"

philliphaydon• 13 years ago

Oh that delay is a feature. Its bloody annoying. I closed the site because its so frustrating. Markdown Pad 2 kills this.

latraveler• 13 years ago

I'm glad you asked, I was thinking the same thing. Nice work though, you get a bookmark on my computer!

http://www.radiumcrm.com

laurent123456• 13 years ago

I'm curious what are all the "Application Cache Progress event" showing up in the console? There's a different URL for each event but it doesn't seem to correspond to an actual HTTP request?

joeblau3• 13 years ago

The best M↓ editor I've used is Haroo Pad[1]. I like it because you don't need to visit a webpage to use it which makes it ideal for offline idea dumps while you're on a plane for example.

[1] http://pad.haroopress.com/

chavesn2• 13 years ago

I've never seen that one, but it looks pretty similar to the one I use, Mou -- http://mouapp.com/

joeblau3• 13 years ago

I actually started off with Mou, but I've found Haroo to work a bit better for my needs. It's got better shortcuts (although I don't need them) the interface is a bit nicer and it's got more customization. Plus since Haroo is built using node-webkit, it runs cross platform.

JasonFruit2• 13 years ago

I really don't there's a need for a special application for this; I use Emacs's markdown-mode, python-markdown, and xhtml2pdf along with a docview pane to edit and preview Markdown, and I can't imagine a smoother experience with a dedicated editor — plus I get to use the editor to which I'm generally accustomed.

joeblau3• 13 years ago

You're right, you definitely don't need a dedicated application, but I would rather just open up one executable instead of cobbling together multiple utilities. It's all about your workflow though, for me, I feel more comfortable using a M↓ where scrolling is synced and it can watch what I'm doing in real-time.

I'm gonna look into your setup though. I'm definitely all about being on the terminal, does your setup work well with VIM as well?

IbJacked2• 13 years ago

I, too, have been playing around with Haroo Pad. During a typical day, I'm using Ubuntu, Windows, and OSX, so I really like the cross-platform availability. While I'm a paying user of Mou, and really like it, it is unfortunately OSX-only.

Congrats to the creator of StackEdit, it seems very well done. It also seems to work really well while offline, which is nice. The biggest blocker for me is that when I need to create or edit a markdown file, it's usually a local file in a git repo. In my case, it is simply more convenient to use a native app.

cheshire137• 13 years ago

I find it strange that the icon used is so similar to StackOverflow's if this isn't an app built by the same people.

chavesn2• 13 years ago

Definitely an odd choice. Asking for trouble. If you've put so much work into, is the marketing value from a hint of association worth the potential mess?

_pferreir_• 13 years ago

I asked myself the same question. At first I thought it was some kind of editor using the Stack Overflow Markdown flavor. It's really confusing.

cruise022• 13 years ago

It is an editor using PageDown, the Stack Overflow Markdown flavor.

cruise022• 13 years ago

StackEdit is a free, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

Jonovono2• 13 years ago

What I want to see is an open source markdown editor that renders the preview as you type where you type (not side by side).

For an example check out http://mangomarkdown.com/ (which powers foldingtext).

There are a few projects that do this, but not open source, that I can find! It might not be that hard to change the current ones that go side by side to do this.

(I am planning to work on one, but have not gotten around to doing much, and will probably take a different approach to it than this)

guynamedloren• 13 years ago

Have you seen http://prose.io/?

Looks similar to mangomarkdown, and it's open source. I'm using it in a project I'm working on and loving it.

Edit: actually, I think I like the mango style even better. Didn't realize this before, but the markdown tags are hidden after you type - pretty neat. (My initial test was a few heading tags, which still display the '#' in the margin).

Jonovono2• 13 years ago

Oh, cool! I have heard of this, but I did not know they did the rendering like this. Thanks!

edit: Ya, I still like mongo and how they make the header kinda fade out, have support for checkboxes (well folding text does), and when you are on a unordered list and press enter it automatically makes a new one. Mango has just made a codemirror mode to handle this it looks like.

bliker• 13 years ago

I did a lot of work on that. But I found out most of the parser kinda ignore the complex stuff and are very sloppy about the white-space. So I am working on my own parser.

That turns out to be quite a challenge

For example Mango fails with any combination of bold and italic

Trezoid• 13 years ago

The biggest problem for that kind of editor in a web environment is making it work consistently across platforms.

Getting everything nice in up to date desktop browsers is relatively simple (contenteditable div, little bit of javascript, easy). Try to introduce iOS into the mix and things get very messy, very quickly.

troels• 13 years ago

Not quite what you're asking for, but I made this thing some time back: http://troelskn.github.io/upflow/

cben• 13 years ago

I'm working on http://mathdown.net (https://github.com/cben/mathdown). Open, except for using Firebase. Very much alpha at this stage - unsecure, sub-par highlighting, doesn't help with formatting, slow math rendering, if you don't bookmark all your documents you lose them...

I'm not hiding markup like Mango, except for latex formulas which I'm replacing with mathjax rendering - but they turn back into source the moment the cursor enters them. It's inspired by emacs' auctex and more directly by https://play.google.com/store/apps/details?id=com.jamesmc.wr... (gratis but closed).

I'm also surprised almost nobody is taking the syntax-highlight-IS-the-preview approach to markdown editing. I've heard the "plain markdown lets me focus on content and ignore formatting" idea, but I don't see how e.g. bigger font for headings is undesirable. It's not that variable fonts are hard to implement - CodeMirror already solved this: http://codemirror.net/demo/variableheight.html (Variable fonts are not a pure win. They screw up indentation => I'm planning to use monospace for all leading spaces, as well as list bullets/numbers.)

Shank• 13 years ago

(Context: Using ChromeOS)

The biggest flaw I see in this (and in several alternatives suggested below) is that it doesn't support native browser spell check because it uses Ace (and in the case of alternatives, they do text rendering that isn't native and isn't detected as text). I use Markdown for taking outline based notes - and one of the biggest stopgaps is that I can spell check my work to make sure I'm not screwing up my own notes as I type during a lecture.

In that regard, the only thing I've found that meets this criteria isn't a Markdown editor, it's Writebox -- https://write-box.appspot.com/

dzsekijo• 13 years ago

https://github.com/benweet/stackedit/issues/100#issuecomment...

jelled• 13 years ago

My favorite online markdown editor https://draftin.com/ seems to work fine with native spell check.

jsilence• 13 years ago

Very well done!

Would love to see it integrated with Etherpad somehow so that several people could colaborate on the same document.

We're often using Etherpad to collect notes during meetings. Converting them to a nice formatting in real time would be nice for those who are only following the document.

Synchronization with ownclowd would be nice as well.

laacz2• 13 years ago

I was searching for the best way to edit online content and Markdown was obvious choice. Until I saw what Medium has done. I believe that WYSIWYG is the only way. You still get emphasys on text but with no need to learn any kind of markup no matter how human readable it is.

On the other hand Medium's approach is tied to their visual style and design, it does not support many things I'd wish it would. Still, I'm rooting for WYSIWYG in the future.

[edit] Sorry, forgot to add that nevertheless this Markdown editor is impressive.

oneeyedpigeon• 13 years ago

But the web is not WYSIWYG, so you're really just editing text in a bespoke 'format' layered on top. Fair enough if that works for you, but it's important to recognise this and understand the drawbacks.

laacz2• 13 years ago

I agree partially. For most people there is no need to see web as any particular format or markup.

dingaling• 13 years ago

Textile / Textile2 is an interesting half-way house; less semantic in some ways that Markdown but balanced by more control over the output ( e.g. using h1 / h2 headings, ability to force paragraphs with p ) without wandering into tag-soup territory.

http://redcloth.org/textile/writing-paragraph-text/

vidarh• 13 years ago

My problem with WYSIWYG editors is that I have never, ever seen one that does not end up adding messy markup that sooner or later becomes a liability when you want to switch to another tool, or find yourself in a situation where you want to hand-edit the document.

This is motivated by multiple blog platform changes etc. that all have left me doing messy filtering of exported data to be able to import it properly when moving my sites.

That's the appeal of Markdown for me. I'd rather add some custom filters to let me use some additional stuff in my own Markdown (which works ok since my additional markup worst case is just treated as plain text, and I can easily enough commit the code to turn it into "vanilla" markdown in the same repository as the content) than get tied into yet another format that messes with my content.

I only use WYSIWYG editors of any kind for content I expect to throw away now. E.g. reports at work that will have a lifespan of days to month is fine. Articles I want to keep an archive of for years to come, not so much.

jwarkentin• 13 years ago

This is awesome! I've wanted something exactly like this for ages for publishing to my blog! You are my hero - at least for the night :p

bvancea• 13 years ago

I just love the LateX support. I was actually just looking for something similar.

Great work, the editor is pretty impressing even without that feature.

zengr• 13 years ago

This is good! I have been using stackoverflow's wmd which I host on heroku: http://wmd.heroku.com

m_mueller• 13 years ago

I quite like it, the UI is intuitive and functional.

Sort of related: Is there a library or editor that could be used to create both markup for the web as well as export to LaTeX syntax? My use case: Software documentation where I'd like to have both a Wiki as well as creating a professional looking PDF document (or even print it for the old fashioned folks). That sort of functionality would be worth paying for in my case.

clienthunter2• 13 years ago

pandoc

lelandbatey• 13 years ago

Yep.I use pandoc to convert all the notes I take to a variety of formats for all my different devices and needs. For example Pdf for highly consistent and pretty viewing on a tablet, html as an all around backup, and others as needed. Pandoc is fantastic!

drifkin• 13 years ago

Also check out gitit (http://gitit.net), written by the same author as pandoc. It's a git-backed wiki that uses pandoc to let you write in a variety of formats. Markdown + latex for math works well for taking notes in a wiki format. The content is stored as flat files in the repo that you can just export as pdfs using pandoc if you wanted to.

bachback• 13 years ago

Ah, it's open. took me a while: https://github.com/benweet/stackedit

bowerbird• 13 years ago

this arena is getting kind of interesting, what with all of the new tools being mounted, and the variations, in terms of interface, wysiwyg-ness, storage locations, online/offline wrinkles, auto-save-timer idiosyncrasies, and so on... plus, as a long-time observer of markdown, there are a lot of butts that are going to get bitten when people discover the inconsistencies and edge-cases that arise between the different flavors. so it's gonna be quite fascinating to see the shakeouts that'll happen.

-bowerbird

dtim• 13 years ago

This is amazing.

cgcardona• 13 years ago

Nicely done! Throughout the day I'm very often jotting down notes in markdown and then pasting them into a Gist to share with someone.

The frustrating part is not seeing how it's going to be formatted while I'm actually taking the notes. This app could solve that problem. I'll give it a try this week.

Some questions/comments:

1. What are you using for the popover tour that appears the first time someone visits the page?

2. The logo looks very much like the Stack Overflow logo[1]. Are you associated with that group? If not I'd consider changing it.

3. I'm familiar with but haven't used Epic Editor[2] by Oscar Godson and friends[3]. Have you checked it out by any chance?

Again, great work and I'll be giving this a try over the next week or so.

[1] http://blog.moovweb.com/content/uploads/2013/09/stackoverflo...

[2] http://epiceditor.com/

[3] http://epiceditor.com/#credits

tonetheman• 13 years ago

Very cool and really well done. I really wished it would only write in a single spot on dropbox not the whole thing... I found the source and might change that in my own fork. Very very cool stuff!

twog• 13 years ago

We recently just launched a very early dev preview of our markdown editor. It integrates directly with github. I would love some feedback https://alpha.banyan.co/

jstalin2• 13 years ago

Markdown needs nested ordered lists. I would like to convert legal documents to markdown, but I can't. For example:

1. Item one

2. Item two

    a. Subitem a

    b. Subitem b

wazari972• 13 years ago

isn't that an implementation issue? your example doesn't work indeed in the StackEdit link, but

1. Item one

1. Item two

   1. Subitem a

   1. Subitem b

does work, so that let me think that you just need to improve the parser to consider "a b c" as a valid ordered list, and maybe "i ii iii" at the same time?

(I replaced a, b and 2 by 1 to force the automatic numbering)

jstalin2• 13 years ago

Yes, that would be nice if it parsed correctly. I need ordered lists that have capital letters, capital roman numerals, lowercase letters, numbers, and lowercase roman numerals.

leejoramo• 13 years ago

I don't think standard Markdown as specified by John Gruber can handle that. You can't use (a,b,c). It has to be arabic numerals.

Markdown will ignore the actual value of the digits. (1,2,3) or (1,1,1) will both be rendered as (1,2,3). This is a result of the way that HTML & CSS deal with lists. The HTML has no way to specify the value to a list item. However, you can use CSS to specify the way each list nesting level is styled. So you can have a list that has Roman Numeral -> Uppercase Letter -> Arabic Numeral -> lowercase letter

Some enhanced version of Markdown may get you closer to what you want. I use MultiMarkdown and check it, but it doesn't support directly using (a,b,c) notation either.

dragonwriter• 13 years ago

The HTML has no way to specify the value to a list item.

The "value" attribute of the HTML "li" element does exactly this, but setting the value isn't really what you need for what GP was asking for; setting the kind of marker is. This can, as you note, be done through CSS, but it can also be done through HTML (using the "type" attribute of the "ol" element.)

In the context of conversion of legal documents, where the marker type is intended for reference, it would be semantically correct to do this in HTML, so it would probably be desirable for markdown to support all the marker types supported by HTML for ordered list as markers for ordered lists, and set the type attribute correctly.

So, using a number should result in the current behavior, using a lowercase letter (other than one which might be a lowercase roman numeral, like "i"!) should result in lowercase-alpha markers, etc.

pioul• 13 years ago

Since we're dropping links here and there, here's the also free and open source Markdown editor I created. It's also minimalist, and unflavored: http://markdown.pioul.fr/

The source is on GitHub: https://github.com/pioul/MinimalistOnlineMarkdownEditor

StackEdit: A free, open-source Markdown editor based on PageDown

Related Stories