TweakStyle TweakStyle Docs

# Introduction

Welcome to the TweakStyle documentation. This is a work in progress and will be continuously updated. Pull requests are welcome so if you would like to contribute, please fork me on GitHub.

# What is TweakStyle

TweakStyle is an Integrated Development Environment for Web Development.
Unlike most IDEs, TweakStyle is tailor-made for Front-end Development and understands Web Design.
It tends to packs all you need to code, preview and debug Web interfaces with the perfect blend of features.

# Why TweakStyle

“It first started with a daily frustration. I was developing the front end of a web app and with the tools I had, the development process was really painful. I was switching all day long between tools that didn’t integrate well with each other (code editor, build tools, browser & development tools) and was taking a ridiculously long time to make small adjustments.”, Félicien François, Creator of TweakStyle

Our usual workflow was heavily splitted, inefficient and unconfortable.
TweakStyle steps up your workflow to the next level by letting you preview and test as you code in a breeze.

# What TweakStyle is Not

TweakStyle is not a Content Management System, even if it can be used to edit web contents.
TweakStyle is not a Visual Editor, even if it packs some visual tools.

TweakStyle is definitely made to Code.
As a result it requires a minimum knowledge of Web Development to be used.

# System requirements

Operating System:

Hardware requirements:

# Trial & Licensing model

TweakStyle may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation However, you will get occasionally a trial reminder.
TweakStyle license is per user, with a one time fee. With one license you can run it on all your computers and operating systems and you get all future updates free of charge.

# Getting Started

TweakStyle UI is split in 2 panes.
When opening TweakStyle, you’ll see the Workspace tab on the left side and the Preview pane on the right side.
When you’ll open files for editing or when you’ll navigate in the preview pane, code files will be pined in new tabs, on the left side.

When first opening TweakStyle, a sample project is added to your Workspace to let you make tests without having to Create a project.

# Workspace

The workspace tab is where you add, remove and manage your projects and files.

Here a few things you can try:

As soon as you’re ready, you should create a new project.
You can also remove the sample project to clear your workspace by right clicking on the project and click on “Delete project”.

# Create a project

In TweakStyle, there are several ways of starting a project. You can either create a project from scratch, from existing files or from an online website.

# From scratch

# From existing files on your computer

# From an online website

# From a git/github repository

For now, TweakStyle does not natively support version control. You can use TweakStyle with a versioned project, but you’ll have to use a third party software for all git operations (clone, pull, compare, commit, …).

# From a remote server (ftp/sftp)

For now, TweakStyle does not natively support FTP or SFTP. You can use TweakStyle on a project published on FTP, but you’ll have to use a third party software for all ftp operations (get source and push to remote server).

# Project setup

# Use embedded static server

TweakStyle is shipped with an embedded static server. It is the default option when creating a new project, and you don’t have anything to do to use it.
When opening an html file in the preview, it will automatically start, on an available port and with root path equal to the project root.
It allows to preview html files seemlessly, without having to wonder about root path or security restriction issues.
But this is a basic static server: It does not support any configuration files nor server side languages (PHP, Nodejs, Rails, Java).
For those, you’ll have to use your own local server.

# Use your own local server

# Work directly on an online website

TweakStyle allows you to preview changes on an online website, through a feature called “Override”.

If you want to set this as the default for a project, you can set the project host:

# Preview

The preview pane lets you navigate like in a browser[5].
To navigate, you can either type an url in the address bar and press Enter or open a file from the workspace.
When opening a file from the workspace, the preview will browse an URL that depends on your Project setup. It defaults to the embedded local static server.

# Request mapping & Override

When navigation occurs, a new Code tab is opened in the left side, with the files involved in the previewed page.
TweakStyle tries to map the requests to your project files. All the files successfully mapped, are colored in blue while others remain in orange.
At the same time, Stylesheets (usually .css files) are Overridden with the resolved local files and synced with the code tab.
This means that the preview is updated live and instantly:

Since v0.9.0, TweakStyle supports Override for all kind of files (HTML, Javascript, Images, …). But Live Update without reloading is only available for Stylesheets.
You’ll have to save the changes (Ctrl+S / +S) and refresh preview in order to see the changes applied.
If the Auto Reload feature of the preview is toggled on, it will automatically reload on save.

# Code

A code tab is automatically added to the left pane when opening files from the workspace, navigating in the preview or selecting an element.

A code tab can have several files pined in it.

Here a few things you can do with files:

# Build on change

TweakStyle v0.9.0 introduced a new “Build On Change” feature, available on local files (blue ones).
Click on the wrench icon to open the build settings dialog:

For a few known Preprocessors, the Build command is prefilled with a default command line:

Note: Compiler binaries are not included with TweakStyle. You’ll have to install them separatly.

The command line will be executed each time one of the matching files change or is saved.
To trigger a build manually you can open the file, focus the editor and press Ctrl+S / +S.

# Preprocessors support

SASS, LESS or Stylus are examples of Preprocessors for the CSS language.
When using one of those, the source code must be processed (i.e. built) into CSS before it can be used by browsers.

TweakStyle v0.8.0 and v0.9.0 introduces some support of Preprocessors and custom builds:

This is made possible through Sourcemap support and Watch for file change

For now, TweakStyle does not embed any preprocessor compiler. To get this working, you’ll have to setup the compiler yourself.
Don’t forget to enable sourcemaps and use watch mode (compile on save).
You should find easily how to setup those options in the documentation of the Preprocessor you use.

# How can I help?

# Spread the word

Tell about TweakStyle! Share your though, your screenshots, videos and gif. Forward and comment the latest updates on Twitter.
The more, the merrier!

# Purchase a license

https://tweakstyle.com/#buy.html

# Report bugs

Got a crash, an error or an unexpected behavior? Please Report the bug. We’ll answer you and fix it as soon as possible.

# Give us feedback

Help us improve TweakStyle, Give us feedback. Vote for the features you expect the most and post your ideas.


  1. We’re considering the implementation of a “Create project from template” feature that would make creating projects from scratch much easier.

  2. You can also do it in explorer/finder. Right click on the project or directory and click on “Open in explorer/finder”

  3. TweakStyle does not handle yet dragging files from a directory to another or from explorer/finder to workspace.

  4. We’re considering the implementation of a simple FTP publish feature.

  5. TweakStyle browser engine is based on latest Blink (Chrome/Chromium engine)