Skip to content
Blop is a Web oriented programming language that compiles to JavaScript
Branch: master
Clone or download
Latest commit 70ce2bc Jun 13, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Write a test Jun 10, 2019
src Add a virtual node test Jun 13, 2019
vscode Complain about unreaable code Jun 11, 2019
.editorconfig Split things even more Nov 26, 2018
.eslintrc.js Generated parser pass eslint Dec 12, 2018
.gitignore Implement Server Side Rendering Jan 22, 2019
LICENSE.txt Create LICENSE.txt Feb 28, 2019
blop.config.js Document type inference Feb 6, 2019
jest.config.js Configure Jest Jan 18, 2019
package-lock.json Fix audit warning Apr 15, 2019
package.json New versions Jun 4, 2019
sandbox.config.json Try sandbox Jan 24, 2019
webpack.client.js Implement source map Feb 18, 2019
webpack.config.js Split webpack configs Jan 31, 2019
webpack.server.js Implement a smart namespace for VNode use in conditionals Feb 1, 2019

The blop language

Blop is a turing complete language that natively and elegantly generates Virtual DOM using a familiar HTML like syntax. Unlike JSX you are not limited to expressions and can use the full power of the language to generate Virtual DOM. You can mix any statement, expressions, and HTML like syntax within the same function.

The HTML tags written with blop are converted into Virtual DOM nodes using the snabbdom library.

The Blop language compiles to ES6 compliant JavaScript. The language is mostly self contained and has very few dependencies.

Edit blop-language

Language features

  • Virtual DOM generation is natively supported by the language.
  • Fast compilation (+30'000 lines by second).
  • A linter is integrated into the language: no linter debate.
  • Good integration with Visual Studio Code: linter and syntactic coloration.
  • Source maps.
  • Server Side Rendering in the example.
  • Type annotation with very basic type inference warnings.
  • Similar syntax and features than ES6.

Language features missing

  • The language is still in beta


npm install blop-language

Or if you want to use the development version with examples

git clone this repo
npm install
npm start
open http://localhost:3000

Command line usage

To convert a single file

blop -i input.blop -o output.js

Configure Webpack loader for blop

Add this rule into your webpack.config.js

module.exports = {
  module: {
    rules: [
        test: /\.blop$/,
        use: [
            loader: 'blop-language/src/loader',
            options: {debug: false}

Configure Jest for blop

// jest.config.js
module.exports = {
  moduleFileExtensions: [
  testMatch: ['**/*.test.blop'],
  transform: {
    '^.+\\.blop$': 'blop-language/src/jest',

Install Visual Studio Code extensions

Install them though visualstudio marketplace.

vscode will prompt you to install the extenstion when you open a .blop file

Here is a link to the extensions on the visualstudio marketplace

Install the extensions

Install them throught github

If you cloned the repository, it is has simple has creating a symbolic link to your ~/.vscode/extensions directory. This function will do it for you:

cd blop-language/
npm run link-extensions

Relaunch vscode and open a .blop file to see if the linter and coloration work

You can’t perform that action at this time.