Turn your browser into a visual web development tool

beta

Made for Web Developers

Tweak is a Chrome Extension that turns your browser into a WYSIWYG page editor, use the tools you already are accustomed to and handle design with Tweak.

tweak workflow

1

Start from a template

Tweak comes with templates that help you get started - download a template and serve it with Tweak server (server comes with templates).

Start editing with a click

Start the Tweak server on your local machine and with a click of the Tweak extension your browser becomes a WYSIWYG editor.

create

Design mobile layout with ease

Switch to mobile view and design a layout that fits handheld devices.

2

Create your library of building blocks

Build a library of HTML components and sections using a code editor of your choice and design your page with Tweak's click and drag interface.

Feature title

                    
<!-- Components -->
<div class="component" style="width: 70px; height: 70px">
  <div class="workflow-number soft-shadow">1</div>
</div>
<div class="component" style="width: 200px">
  <a href="" class="main-button">start now</a>
</div>
<div class="component" style="width: 200px">
  <a href="" class="cta-button">watch video</a>
</div>
<div class="component" style="width: 250px">
  <h2 class="body-title">Feature title</h2>
</div>
                                    
                    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                
            

customize

Live reload

Tweak reloads your styles on the browser every time it detects a change in your css folder - and when you save in Tweak your local files are updated.

3

finish

Save

One click deploy

Save your changes locally and when you are ready, grab the public folder and use your existing services to make your site online.

Push your changes online with a click! Edit and save changes on a live site, right from Tweak.

Get the most out of Tweak and stay updated with our Medium publication.

tutorials, inspiration & resources

Get started for free