htmlpreview/htmlpreview.github.com

HTML Preview for GitHub Repositories

GitHub & BitBucket HTML Preview

Many GitHub repositories don't use GitHub Pages to host their HTML files. GitHub & BitBucket HTML Preview allows you to render those files without cloning or downloading whole repositories. It is a client-side solution using a CORS proxy to fetch assets.

If you try to open raw version of any HTML, CSS or JS file in a web browser directly from GitHub, all you will see is a source code. GitHub forces them to use the "text/plain" content-type, so they cannot be interpreted. This script overrides it by using a CORS proxy.

Usage

In order to use it, just prepend this fragment to the URL of any HTML file: https://htmlpreview.github.io/? e.g.:

• https://htmlpreview.github.io/?https://github.com/twbs/bootstrap/gh-pages/2.3.2/index.html
• https://htmlpreview.github.io/?https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html

What it does is: load HTML using CORS proxy, then process all links, frames, scripts and styles, and load each of them using CORS proxy, so they can be evaluated by the browser.

GitHub & BitBucket HTML Preview was tested under the latest Google Chrome and Mozilla Firefox.

License

© 2019 Jerzy Głowacki under Apache License 2.0.

htmlpreview.github.com's Issues

Recent replaceAssets change can cause infinite loop in Chrome

It appears that in Chrome the loop in replaceAssets iterating over the documents scripts can get stuck. It appears that the document.write of the outerHtml (for scripts with no src attribute) itself causes the script array to grow by 1, so the loop continues, consuming CPU and memory until it presumably runs out of memory.

Problem can be seen at this URL.

Tests of Firefox and IE show that they seem unaffected by this. I'd be happy to help fix this, however the reasons for the latest commit changes are not clear to me, so I'd risk breaking again what was presumably getting fixed by the latest commits.

Mixed content errors prevent content loading

Github content is served over https, as is htmlpreview, but the part that discovers javascript/css via the Yahoo API is loading via http - leading to mixed content errors and a failure to load the preview in Chrome and Firefox. IE 11 will prompt for whether you want to load the insecure content.

Error: Cannot load file

Can not preview my html file I get the following issue. Error: Cannot load file http://htmlpreview.github.io/?https://github.com/username/filepath/filename

Java 7 generated API docs are not displayed properly

Only the root index.html is rendered properly, other pages are missing their resources making some of the texts and links invisible.

As far as I can see the relative paths to images referenced in the css file are interpreted relative to the url of the document instead of the css file.

The same happens in Chrome and Firefox. IE refuses to display the page.

Here is such an API doc: http://htmlpreview.github.com/?https://github.com/kelemen/api-docs/blob/jtrim-core/api/index.html. This page is rendered properly but clicking on any class should reproduce the problem. For example: the upper menu bar is not displayed properly (missing its background).

Thank you for the page.

A Parser-blocking, cross-origin script ... error

When I try to use your (awesome, thank you so much for coming up with this idea) HTML preview tool for the URL:

 http://htmlpreview.github.io/?https://github.com/jacomyal/sigma.js/blob/master/examples/custom-node-renderer.html

I get a blank page, with only the following warning in my dev tools:

htmlpreview.min.js:1 A Parser-blocking, cross-origin script, http://query.yahooapis.com/v1/public/yql?q=use%20%22https%3A%2F%2Fraw.githurenderer.html%22&format=json&diagnostics=true&callback=HTMLPreview.loadHTML, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

Since the HTML file I'm trying to view doesn't even contain the phrase yahoo, this appears to be a problem with the tool.

License

Hello,

what is the license of your project? Can I reuse parts of it in my project? I see no license info anywhere

Thanks
Karel

Removal of Google ads

Hi,

While looking for a service that displays the contents for gists, I found your project. Since commit 136b43a, Google ads were injected in the landing page. Why were these added?

Can you add it (in the spirit of a public service, hosted by Github)?

HTML page is rendered twice

The html page that I want to preview is rendered twice in htmlpreview.github.io

Issue in htmlpreview, page is rendered a second time underneath the first one:
https://htmlpreview.github.io/?https://raw.githubusercontent.com/WhoKnocks/Elm-TodoList/master/main.html

Page hosted on github: https://github.com/WhoKnocks/Elm-TodoList/blob/master/main.html

Opening the file in Edge,Firefox or Chrome only shows the page once as expected.

The page is originally written in Elm.

Everything seems broken

http://htmlpreview.github.io/?https://raw.github.com/twbs/bootstrap/gh-pages/2.3.2/index.html

http://query.yahooapis.com/v1/public/yql?q=use%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fyql%2Fyql-tables%2Fmaster%2Fdata%2Fdata.headers.xml%22%20as%20headers%3B%20select%20*%20from%20headers%20where%20url%3D%22https%3A%2F%2Fraw.github.com%2Ftwbs%2Fbootstrap%2Fgh-pages%2F2.3.2%2Findex.html%22&format=json&diagnostics=true&callback=HTMLPreview.loadHTML

responded with a status of 502 (Connection refused)

Loaded local script files don't load from the right location

If the html file has something like <script src="proto.umd.js"></script>, htmlpreview attempts to load proto.umd.js from its own domain, rather than from github.

It doesn't work on IE7/IE8 nor IE9/IE10 with a different error

SCRIPT5009: 'HTMLPreview' is undefined
htmlpreview.github.io, line 1 character 1

Try this on IE7/IE8 http://htmlpreview.github.io/?https://github.com/dotnetwise/Javascript-FastClass/blob/master/src/Scripts/Tests/Index.html
On IE9/IE10 it will also trigger a different error first and then it will render the page

Not needed? rawgit.com works

eg: old:
http://htmlpreview.github.com/?http://github.com/dcodeIO/Preprocessor.js/master/docs/Preprocessor.html

Error: Cannot load file http://raw.githubusercontent.com/dcodeIO/Preprocessor.js/master/docs/Preprocessor.html

new:
https://rawgit.com/dcodeIO/Preprocessor.js/master/docs/Preprocessor.html

No definition found for Table data.headers

@niutech, seems all requests are currently broken with this response:

No definition found for Table data.headers

Example URL that is broken: http://htmlpreview.github.io/?https://raw.github.com/twbs/bootstrap/gh-pages/2.3.2/index.html

Using Mac OS 10.9.x, Chrome 33, not sure if you need anything else.

Any ideas?

having the "No definition found for Table headers" error

Hi,
Since this morning I get "No definition found for Table headers" rendering that page:
http://htmlpreview.github.io/?https://github.com/domotruc/jMQTT/blob/master/doc/fr_FR/index.html
All pages look affected.
Regards

Links to https://github.com are not preserved

I have HTML a document that points to: https://github.com/mitchellh/vagrant/issues/7610#issuecomment-234609660

The link is replaced by:
https://htmlpreview.github.io/?https://github.com/redhat-developer-demos/kubernetes-lab/blob/master/lab/readme.html#issuecomment-234609660

How about a bit flavour of twitter bootstrap to style the index.html ?

Support Gists too

Hopefully it should be straightforward to support Gist URLs as well.

Example gist:
https://gist.github.com/4329423

Example raw URL:
https://gist.github.com/raw/4329423/bae710bfc34fad43e782c85bc9f28dbd3cdcdfb8/index.html

Note that this URL also seems to work:
https://gist.github.com/raw/4329423/index.html

Also see a pretty webservice that renders gists with index.html:
http://bl.ocks.org/4329423

Keep in mind that it uses Github's Gist JS API, and I found that after a few minutes of browsing around that site my IP address was getting rate limited by Github.

Another service that renders gist (and a whole lot more):
http://plnkr.co/edit/gist:4329423?p=preview

Cannot load file when target URL redirects to another URL

Ex: https://htmlpreview.github.io/?http://releases.k8s.io/HEAD/docs/api-reference/definitions.html#_v1_node, gives the following error:

Error: Cannot load file http://releases.k8s.io/HEAD/docs/api-reference/definitions.html

http://releases.k8s.io/HEAD/docs redirects to https://github.com/GoogleCloudPlatform/kubernetes/tree/HEAD/docs

Does this protect against cross-site scripting attacks?

I'm interesting in adding some raw HTML page uploading to my site but I want to avoid cross-site scripting security problems:

http://en.wikipedia.org/wiki/Cross-site_scripting

htmlpreview looks great but I'm interested to know how it avoid that problem?

Sorry for the ignorance. Thanks for scripts.

linked images should be excluded from passing through htmlpreview (it breaks them)

Although with htmlpreview you can link .html documents hosted in the same repo with relative links, at the moment you cannot link to a .png or possibly any other image with the same mechanism.

I have created a small repo to test and demonstrate this.
When I go to
https://github.com/ens-lg4/htmlpreview-test
and follow the third link from the main README I get a rendered index.html file.
But if I then try to follow the third link in index.html , I get an error.

Somehow htmlpreview.github.io? prefix in front of image URLs breaks them. Because when I remove the prefix it works fine (same as the fourth link from the main README).

I believe URL in should only be auto-prefixed with htmlpreview.github.io? if the URL points to html/htm/xhtml document, or possibly also css or js (I'm not sure). But other files without further references such as images work fine without such a prefix.

Thanks for your time!

I cannot preview my code

Hi

I am new to using htmlpreview.github.io, and I am finding it rather difficult to preview: https://github.com/tejanhu/Vue-Postal-Code-Lookup-API.

I am receiving the following error whenever I prepend the url:
Error: Cannot load file https://raw.githubusercontent.com/tejanhu/Vue-Postal-Code-Lookup-API

Please advise.

what about embedded links?

Your solution works just great for the one page - it's just what I need. BUT if I click on any embedded links - I just get the raw source for the target pages. Is there anything I can do about this?

Robert Ramey

Section intradocument links not working

I am trying to make section intradocument links working in my projects help pages.

Looked into #11 and see the example here:

http://htmlpreview.github.io/?https://raw.github.com/twbs/bootstrap/gh-pages/2.3.2/getting-started.html#contents

I implemented the same kind of sections as in the document above, but my links are not working:
http://htmlpreview.github.io/?https://raw.githubusercontent.com/barrydegraaff/pgp-zimlet/master/tk_barrydegraaff_zimbra_openpgp/help/index.html

I expect the links in Contents:
Why Use PGP?
Generating a new key pair
To be rewritten to go to htmlpreview.github.io, instead they keep pointing to the source.

What am I doing wrong? Probably user error, but I am not seeing it.

Thanks Barry

Preview works often only after 1 or 2 manual reloads

With

• Firefox (Linux Version 49.0)

• Chrome/HTMLView (Android 5.1.1)

• Edge (Windows10)

• Chrome (Windows 10)

  you often get no preview but instead a "No definition found for Table headers" as output. You need 1 or 2 reloads (F5...) to get the real previews opened.

I had this problem in the last 24 hours very often
Examples:

• http://htmlpreview.github.io/?https://github.com/twbs/bootstrap/gh-pages/2.3.2/index.html
• http://htmlpreview.github.io/?https://github.com/de-jcup/egradle/blob/master/egradle-plugin-main/html/toc.html

Paths problem

In the preview of my repository https://github.com/AndrewHani/CairoGuide, it can't access not the css file nor the js, although it's well connected on my local text editor.

Thank you.

I couldn't preview my application. The htmlpreview supports React?

I generated the link on the site (LINK HERE!) but nothing happens and I only see a blank page.

Autofocus

Could you spare everyone 1 click?
https://github.com/htmlpreview/htmlpreview.github.com/blob/master/index.html#L51
autofocus

Thank you!

Refused to execute script "" because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

I think this project needs to leverage https://rawgit.com/ so that you can actually get proper mime types back

Error: Cannot load file [source]

When I try to load URL in GitHub & BitBucket HTML Preview I always get the message:
Error: Cannot load file [URL]

Can you fix it?

Adds additional (github) content below webpage

Starting at Skip to content and everything below doesn't belong to the webpage. It's actually content from Bacon.js github page.

http://htmlpreview.github.io/?https://github.com/jon49/TimeCard-Web/blob/master/index.html

Opening up Access-Control-Allow-Origin to https://raw.github.com

It would be very nice if Access-Control-Allow-Origin for http://htmlpreview.github.com granted access to https://raw.github.com; This would allow AJAX requests within the HTML being previewed to successfully go through. Here is a demonstration of the problem:

http://htmlpreview.github.com/?https://github.com/jakefeasel/DDLBuilder/blob/master/index.html

Thanks!

Cannot load html from rmarkdown

Hi,

I am not able to load a html generated with rmarkdown:
https://htmlpreview.github.io/?https://gitlab.com/mdehollander/biosb2016/raw/master/biosb2016.html

However, a file made by someone else using the same method works:
https://htmlpreview.github.io/?https://raw.githubusercontent.com/psu-psychology/neuro-521/master/neuro-521-gilmore-2016-01-12.html

Other html code hosted externally on gitlab for example works as well:
https://htmlpreview.github.io/?https://gitlab.com/oliver-salzburg/angular-timepicker/raw/master/demo.html

Any clue what is wrong with my html file?

The bookmarklet is broken in Firefox

When activating the bookmarklet in Firefox, a CSP (Content Security Policy) error is thrown.

Not sure if this can be fixed.

Scripts are run twice

I've been using github to host exercises I've completed for my programming class, and htmlpreview to display the output.

But in files that use a <script> tag, everything inside the tag is executed twice:
https://htmlpreview.github.io/?https://github.com/CarlsonL/Web-Programming-2016/blob/master/Exercise7-16.html

Other than this issue, I've found the site very useful.

Element dropdown-toggle not working in firefox

Hello,
We are trying to render documentation from : https://github.com/streamdataio/streamdataio-js/blob/master/doc/index.html
In Firefox, the dropdown-toggle showing elements under Classes is not working. The links are available while the page is loading, but as soon as the load is complete, the elements under Classes are not displayed anymore.
It works fine under Chrome and Safari.
Let me know if you need additional information to troubleshoot.

htmlpreview rewrites links that use htmlpreview

The following html preview:

http://htmlpreview.github.io/?https://github.com/epics-modules/softGlueZynq/blob/master/documentation/softGlueZynqDoc.html

contains a link (in the first paragraph, the word "autosave") that reads, in softGlueZynqDoc.html, as follows:

https://htmlpreview.github.io/?https://github.com/epics-modules/autosave/blob/R5-7-1/documentation/autoSaveRestore.html#configMenu

but if you click on it you get this:

https://htmlpreview.github.io/?https://github.com/epics-modules/softGlueZynq/blob/master/documentation/softGlueZynqDoc.html#configMenu

html preview used to work - but now it doesn't

This

http://htmlpreview.github.io/?https://raw.github.com/robertramey/safe_numerics/master/safe_numerics/doc/html/index.html

used to work great - but now it fails.

Now I get:

Error: Cannot load file https://raw.github.com/robertramey/safe_numerics/master/safe_numerics/doc/html/index.html

What do I have to do to make this work again?

Convert this user into an organization

htmlpreview can be converted into an organization with members.

HTML preview not updating the html

I have initially previewed a html file and now i've edited the html file but the preview is not updating the file.

The updated html file is located at https://bitbucket.org/alvations/dslsharedtask2014/downloads/dsl-results.html

but the preview is still showing the old version: http://htmlpreview.github.io/?https://bitbucket.org/alvations/dslsharedtask2014/downloads/dsl-results.html

Is there a way to resolve this? Thanks for building this great tool.

My index.html is not loading/ getting error

Please advise>
I need to send a preview link of my git index.html page, and presently the preview format I learn to do is not working. I'm getting error.
I type in: http://htmlpreview.github.io/?https://github.com/teresab/IS_Project1/blob/master/index.html.

I have a successfully preview link for another html.index page (as follows):
http://htmlpreview.github.io/?https://github.com/teresab/project-1/blob/master/src/index.html

Please advise. I am new to git hub and need to submit preview link to this page by end of Monday Dec. 1.

A thousand thanks,
Teresa

No definition found for Table headers

Having this issue with my preview:

https://htmlpreview.github.io/?https://github.com/xushell/FashionUniverse6/blob/master/index.html#

Is there a fix for this?

Page cannot be loaded

I was browsing aglio's examples section when I ran into this bug.

Not sure why this happens, but the script seems to be hitting this line in loadHtml:

else
    HTMLPreview.previewform.innerHTML = 'Error: Cannot load file ' + HTMLPreview.raw();

External link is not preserved

I use htmlpreview for the following page : https://github.com/AliceO2Group/CodingGuidelines/blob/master/coding_guidelines.html

If you "toggle all summaries" at the top and search for "Getting" you will find the following line :

For more details: Getting #includes right.

The link should point to https://community.kde.org/Policies/Library_Code_Policy#Getting_.23includes_right with the following html :

<a href="https://community.kde.org/Policies/Library_Code_Policy#Getting_.23includes_right">Getting #includes right</a>.

But with htmlpreview it points to https://htmlpreview.github.io/?https://github.com/AliceO2Group/CodingGuidelines/blob/master/coding_guidelines.html#Getting_.23includes_right

How to preserver this external link ?

Thank you
Barth

Framesets

Framesets are not rendered properly:

For example see:
https://raw.github.com/openworm/SegWorm/master/docs/SegWorm/index.html

Intradocument links (<a href="#foo"/>) don't work

(In Firefox, at least)

I think that this is because of the following code:

data.query.results.resources.content.replace(/<head>/i, '<head><base href="' + HTMLPreview.folder() + '">')

That should be relatively easy to fix by setting the base to the filename.

Error: Cannot load file https://raw.github.com/...

The private repo I'm trying to use this with fails with "cannot load file" - is there any way to get additional debug information? No matter the HTML file I've tried, it fails in the repo.

script files linked below the body are not shown

I have my script filed linked below the body element and when you inspect the HTML of my page through this project the links just aren't there

Is this still maintained?

The last commit is made 6 months ago. Is the project still maintained?

`nosniff` header breaking functionality

GitHub recently started pushing nosniff HTTP header, which breaks functionality of this tool.

example

Javadoc is no longer displayed

I don't know when it became broken but currently Javadocs are not displayed at all. For example, see: http://htmlpreview.github.com/?https://github.com/kelemen/api-docs/blob/jtrim-core/api/index.html