| 1 | # Texel
|
| 2 |
|
| 3 | Texel is a tool to help you build web applications, demos, creative coding sketches, data visualizations, and prototypes. It is inspired by Processing and other creative coding toolkits, but designed with modern JavaScript and web development in mind.
|
| 4 |
|
| 5 | # About
|
| 6 |
|
| 7 | Texel helps manage the "build step" part of modern web programming, but without any complex configuration or project setup. It attempts to simplify the following tasks:
|
| 8 |
|
| 9 | - _Project Setup_ — a simple way to start a new project
|
| 10 | - _Development_ – a fast and easy development experience
|
| 11 | - _Bundling_ — a simple way to publish your web application
|
| 12 |
|
| 13 | Texel handles things like reloading the browser when you edit your code, loading third-party dependencies, and transpiling modern JavaScript & CSS syntax for older browsers. See [Features](#features) for more details.
|
| 14 |
|
| 15 | Unlike some other creative coding tools, like [Codepen.io](https://codepen.io/) and [Glitch](https://glitch.com/), Texel is designed for offline use and scalability: you can use it to build small sketches or a large production website.
|
| 16 |
|
| 17 | # Quick Start
|
| 18 |
|
| 19 | Texel comes in two flavours: Texel App and Texel CLI.
|
| 20 |
|
| 21 | ### Texel App
|
| 22 |
|
| 23 | The Texel App makes it easy to jump right into creative coding without having to learn about modern JavaScript ecosystems like [Node.js](https://nodejs.org/en/) and [npm](http://npmjs.com/). This is great for beginners who just want to build a simple web page or experiment with creative coding.
|
| 24 |
|
| 25 | The Texel App is also great for those running a code workshop, as it doesn't require your students to install Node.js or npm in order to take advantage of modern JavaScript development.
|
| 26 |
|
| 27 | > [Quick Start: Texel App](./quick-start-texel-app.md)
|
| 28 |
|
| 29 | ## Texel CLI
|
| 30 |
|
| 31 | If you are already familiar with [Node.js](https://nodejs.org/en/) and [npm](http://npmjs.com/), you may prefer to use Texel's command-line interface (CLI). This gives you greater control over Texel's features and options, and allows you to use your own version of Node.js and npm.
|
| 32 |
|
| 33 | > [Quick Start: Texel CLI](./quick-start-texel-cli.md)
|
| 34 |
|
| 35 | ## Features
|
| 36 |
|
| 37 | Texel comes with many features out of the box, including:
|
| 38 |
|
| 39 | - Live reload browser on file save
|
| 40 | - ES2015 syntax that transpiles down to ES5 (for older browsers)
|
| 41 | - Ability to import/export files and grab libraries from `npm` (JavaScript bundling)
|
| 42 | - CSS auto-prefixing and modern syntax support with [CSSNext](http://cssnext.io/)
|
| 43 | - CSS pre-processor support (Post-CSS, SASS and LESS)
|
| 44 | - GLSL shader reloading for WebGL applications
|
| 45 | - Built-in support for React and JSX
|
| 46 |
|
| 47 | For more details on how Texel works, see [Under the Hood](./under-the-hood.md).
|
| 48 |
|
| 49 | ## Docs
|
| 50 |
|
| 51 | After you've gone through the quick start, you can browse through some other aspects of our documentation:
|
| 52 |
|
| 53 | - Importing Dependencies
|
| 54 | - Loading Files & Assets
|
| 55 | - Publishing your first Website
|
| 56 | - Project Examples:
|
| 57 | - ThreeJS (3D, WebGL)
|
| 58 | - D3 (data visualization)
|
| 59 | - P5.js
|
| 60 | - Canvas 2D
|
| 61 | - React
|
| 62 | - Using Texel for Workshops
|
| 63 | - Using Project Templates
|
| 64 | - Live GLSL Reloading
|
| 65 | - [Under the Hood](./under-the-hood.md)
|