matheusfelipeog / beautiful-docs

Pointers to useful, well-written, and otherwise beautiful documentation.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Any recommendations about live demos or sandbox examples

kentmw opened this issue · comments

I'm mostly looking for tools/libraries that help projects build documentation that showcases their javascript. Sites like http://github.hubspot.com/executr/ or http://requirebin.com/ come to mind as starters.

Hmm. That's a good question. Let's see what we can find...

Depends on what kind of JS you're referring to, but I think the react docs index does a pretty nice job: https://facebook.github.io/react/index.html- the rest of their docs are more follow-along. Chartist does an amazing job showcasing with live sandbox editing: https://gionkunz.github.io/chartist-js/

I think Mark also already mentioned ember. They do a good job of this as well.

@kentmw Does this help at all?

These are great examples of sites that realize that running the actual code alongside their documentation is important. Couple things:

  • I really would love to see a library/npm package that made these things possible for other projects - having to rebuild documentation infrastructure is annoying, time consuming and error prone.
  • Bonus points would be a place where readers of the documentation could change the demo code and see how the code reacts. Change variables/constants here and there and see things change. Play with the API a bit to see if it feels right. @artemist I took a look at charlist to find the live sandbox editing you spoke of, but I couldn't find it. I saw some demo charts but no sandbox - is there a link to what you saw? EDIT: found it: https://gionkunz.github.io/chartist-js/examples.html YES! what did they use to let you do that??

I just saw: https://tonicdev.com/ as a sandbox environment that can hook into npm modules. I'm wondering if there's a way to hook premade tonic environments into documentation.