Pagedemos

Pagedemos was start by long-time StackOverflow users who needed a permanent place to provide off-site links for code demonstration. With a generous initial investment, we've arranged hosting for several years (until 2018 as of Aug 2015). The nominal fees for optional demo feature upgrades are used to extend this horizon into the future. After hosting, legal, and administration costs, all proceeds are re-invensted towards hosting with the goal of creating a permanent place for code.

Aside from lasting forever, we've worked hard to put the features you want in an online editor into pagedemos. We love interface flexibility and customization, open API access, and fast-loading applications.

Got any suggestions? We would love to hear from you! Thanks for checking us out, and enjoy.

Features

Frequently Asked Questions (FAQ) (back to top)

• Is it free?

  Yes, because we want everyone to be able to use it. Some services which incur us expenses are assessed a small per-demo fee, but they are all optional. Aside from that, everything here is free and licensed for any use, including the API.

• Do I need an account?

  No, we don't offer user accounts or charge monthly fees to provide premium features, demos are free and can be upgraded ad-hoc. If you upgrade a particular demo with special features, it's applied forever, with no further costs. This avoids typical account headaches like forgotten passwords, privacy concerns, security questions, billing mishaps, etc...

• Who can see my demos?

  The only way anyone can get to your demo is by following a link your created because we don't publish or list anyone's demos, and the urls are un-guessable. In short, demos are all private by default, putting you in control of all your demos; stunning and embarrassing alike.

• How long do the pagedemos I create last?

  Forever. Please consider purchasing a few premium feature upgrades like vanity URLs or HTTPS access to support our continued hosting.

• How do I use my desktop editor (vim/notepad/etc) to edit a pagedemo?

  Go to Tools > Upload, and choose a file you're already editing in yor desktop editor. Make and save a change in your editor, and the pagedemo will update. For best results, make sure the "Update on Code Change" is checked in Tools > Settings > Preview, and that "Watch Uploaded Files" is checked in Tools > Settings > Devices

• How can I preview on many devices at once without refreshing each one?

  You need to setup multi-device editing. Your editing box will become the pusher and your remote viewing devices are listeners. Go to Tools > Settings > Devices on each device. For the editing box, choose to push updates on revision commits, or mere runs. For the remote view devices, check the "Listen for changes..." option, and use the view mode toggle in the bottom-right corner of the screen to show output only. Now make an edit and watch the remote previews update themselves.

Keyboard Shortcuts (back to top)

• ScrollLockToggle View
• F8Format Menu
• F9Toggle View
• F4Run
• PauseMenu Toggle
• EscClose Menu
• Ctrl+ SpaceSuggest Completion
• Ctrl+ /Toggle Code Comment
• Ctrl+ EnterRun
• Ctrl+ sSave (Share)
• Ctrl+ Shift+ sFork (Clone)
• Ctrl+ Shift+ DelClear
• Ctrl+ Shift+ LFormat Menu
• Ctrl+ 1Editor-Only View
• Ctrl+ 2Preview-Only View
• Ctrl+ 3Dual-Pane View (default)

API (back to top)

The client-side JavaScript API provides a simple tools to load, save, and find your pagedemos using a promise-based interface. You can also use these same commands though HTTP requests, action at http://pagedemos.com/api/
The HTTP API uses the param names as noted below, with the command being passed as cmd, ex: /API/?cmd=exists&id=1234567890AB
Content should be submitted as a POST variable value using a application/x-www-form-urlencoded form request type.

Also note that all API commands that only need an ID can be accessed via a path short-cut without a query: /API/METHOD/PAGEDEMO_ID/

Commands

• API.comment (id, value, name) ->Boolean

  leaves a comment on a pagedemo

• API.comments (id) ->Array Example

  fetches an array of comments from a pagedemo

• API.dir (id) ->Array Example

  fetches a list of attached resources to a pagedemo

• API.fetch (id, title) ->String Example

  fetches the source of an attached css or js resource

• API.get (id) ->String Example

  fetches the latest single revision of a pagedemo

• API.include (id, title) ->void Example

  injects an attached resource into an HTML document using link/script tags

• API.exists (id) ->Boolean Example

  determines if a pagedemo ID is in-use (true/false)

• API.archived (id) ->Boolean Example

  determines if a missing pagedemo has been moved to a deep offline archive

• API.list (id, type) ->Array Example 1 Example 2

  fetches a list of events from the log, either all or all of a certain kind

• API.pull (id) ->Array Example

  fetch an array of all revisions of a pagedemo

• API.resource (id, value, title) ->Boolean

  file a CSS or JS resource under a pagedemo and by a file title. POST.

• API.save (id, value, title) ->Boolean

  saves a revision of a pagedemo with an optional title. POST.

• API.search (id, term) ->Array Example

  fetches an array of revisions but filters out those not matching a term

URL Endpoints

In additions to the API, each pagedemo provides several url-named sub-views, not just the in-editor shareable URL. These views lets you share and embed, monitor and analyze, and mix parts of your demo with others via resource urls for CSS and JS.

Sharing

• embed /pagedemo_id/embed/ (? opt mode[preview|code], opt update[true|false], opt css[url]) -> HTML perms: CORS FRAME

  View code and output without editor, ideal for framing on other sites. Example

• rss /pagedemo_id/rss/ -> XML perms: CORS FRAME

  View the revision log as an RSS feed for IFTTT and mobile integration. Example

• oembed /oembed/?url=http%3A%2F%2Fpagedemos.com%2Fpagedemo_id%2F2&format=json (url) -> JSON perms: CORS FRAME

  Meta data about the demo and pagedemos.com for better social sharing and extension discovery. Live Example

• output /pagedemo_id/output/ -> HTML perms: CORS FRAME

  View just the preview pane output without editor. Example

• log /pagedemo_id/log/ -> TEXT perms: CORS FRAME

  View a demo's activity log as a TSV spreadsheet of views, edits, and comments. Example

• raw /pagedemo_id/raw/ -> TEXT perms: CORS FRAME

  Same as output view, but allowed for framing and AJAX, and served as raw text. Example

Resources

• resource /pagedemo_id/filename.ext -> JAVASCRIPT/CSS/IMG/TXT perms: CORS FRAME

  View the content of a file resource attached to a demo. Example

• include /pagedemo_id/include/ -> JAVASCRIPT perms: CORS FRAME

  Include one demo into another to load <head>-defined external css+js packages and all <body> content with one script tag. To reduce flicker, place in head tag, while for best perfomance, place just below the end of the body tag, whatever works better. Example

• js /pagedemo_id/js/ -> JAVASCRIPT perms: CORS FRAME

  Collects the content of any inline-content <script> tags. Example

• css /pagedemo_id/css/ -> CSS perms: CORS FRAME

  Collects the content of any inline-content <style> tags. Example

• html /pagedemo_id/html/ -> HTML perms: CORS FRAME

  The contents of a demo's body, without inline-content <style> or <script> tags. Example

Contact (back to top)

Terms Of Service / Legal Mumbo Jumbo (back to top)