Creating your first prototype

If you haven’t done so yet, make sure you install the Chrome Extension before proceeding.

Ok, got it? Let’s get started, click Create Prototype from the Prototypes page.

Labcoat create prototype

Name your prototype

Every prototype needs a name, typically you’ll base it on the project you are doing (e.g., Website Redesign).

Enter the domain(s)

Enter the domain(s) that the prototype should apply to. Only when visting a page on one these domains will get the CSS/JS for the prototype.

You may enter as many domains that you’d like. Remember, the same CSS/JS will be injected when visiting any page on any of the domains for that prototype.

So for example, if you enter these domains:

  • www.example.com
  • staging.example.com

When visting the following, your overrides with be injected:

  • www.example.com/home
  • www.example.com/contact
  • staging.example.com/about

But, the following will not work:

  • example.com/welcome (the missing wwww. means it is is not a match.)
  • login.example.com (the extra login. subdomain means it is not a match.)

For now, enter en.wikipedia.org and click Create

The initial version

Once created, you’ll be redirected to the Labcoat Editor. The first version will already be set up, called Initial Version, along with sample CSS and JS files.

Testing, 1, 2, 3.

Now that you have your initial version, let’s see if it works.

Now visit Wikipedia, and assuming you have the extension installed, you’ll see a garishly red sidebar on Wikipedia.

Make an edit

Now go back to the Editor, and change to background-color: cornflowerblue, click Save, and then reload Wikipedia, you should see a much more pleasing sidebar.

Huzzah! You are on your way to prototyping in production. Learn more about Versioning, Targeting particular pages, and making large changes to the DOM.



Do you have any suggestions for how to improve this (or any) documentation?
Send an email to support@labcoat.io