PHPackages electro-modules/matisse - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. electro-modules/matisse ActiveElectro-plugin[Templating & Views](/categories/templating) electro-modules/matisse ======================= A component-based template engine for PHP web applications 0.10.16(3y ago)22.5k111MITPHPPHP >=5.6 Since Dec 4Pushed 1y ago4 watchersCompare [ Source](https://github.com/electro-modules/matisse)[ Packagist](https://packagist.org/packages/electro-modules/matisse)[ Docs](https://github.com/electro-modules/matisse)[ RSS](/packages/electro-modules-matisse/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (1)Dependencies (6)Versions (24)Used By (11) Matisse ======= [](#matisse) Introduction ------------ [](#introduction) ### What is Matisse? [](#what-is-matisse) Matisse is a component-based template engine for PHP web applications. #### What are components? [](#what-are-components) **Components** are parameterised, composable and reusable units of rendering logic, domain logic and markup, that you can assemble and configure to create visual interfaces and provide functionality to applications. #### How does Matisse differ from other templating engines? [](#how-does-matisse-differ-from-other-templating-engines) Like any other template engine, Matisse generates an HTML document by combining a source (template) document with data from your view model. But unlike most other PHP template engines, which just render templates made of text/markup intermixed with code written in PHP or in a custom DSL, Matisse **assembles user interfaces from building blocks** called components. It also tries to **keep logic out of templates** as much as possible, therefore allowing a **clear separation of programming and presentation logic**. Matisse templates are very **clean and readable**, and are composed only of clean HTML enhanced with additional component tags and binding expressions. Finally, applications made with Matisse are not MVC (Model View Controller) based. Matisse promotes a **MVVM** (Model, View, View Model) architecture, with mono or **bi-directional data binding**. #### How is it similar to other competing solutions? [](#how-is-it-similar-to-other-competing-solutions) Some concepts may remind of you of AngularJS, React or Web Components, which are client-side frameworks. Matisse, combined with the Electro framework, brings to the server-side many of those concepts, but in a pragmatic, simpler, faster and easier way, allowing you to write sophisticated web applications without having to deal with Javascript, ES6, Typescript, AJAX, REST APIs, module loaders, transpilers, file watchers and complicated build toolchains. Just write your code, switch to the browser, hit Refresh and instantly see the changes you've made come to life. Then deploy seamlessly to production. ### What is the value proposition of Matisse? [](#what-is-the-value-proposition-of-matisse) **Matisse allows you to rapidly create complex web applications from composable building blocks.** It reduces significantly the need to write PHP code by using components that, not only can render visual interfaces, but can also provide built-in functionality for handling data, domain logic and user interaction. In fact, with Matisse, your entire application can be made of components, at many abstraction levels, starting from low-level design elements and widgets and progressively nesting more and more higher level abstracted concepts and constructs, up to the point where you'll be able to write your application's user interfaces with your own custom, HTML-compatible, DSL (Domain Specific Language). With practice, your templates will become very terse, readable, semantic and expressive, but will remain flexible enough to accomodate any kind of custom HTML for handling specific requirements. Your productivity will skyrocket by reducing code to a minimum and reusing and sharing blocks of functionality, both within projects and between projects. Matisse optimizes the workflow between designers and programmers, by allowing designers to easily create their own components, without code, and assemble them into functional application mockups that can be converted to working prototypes by programmers with a minimum of rewriting, AND which can later return to designers for further development, remaining fully understandable to them. Matisse also automates many of the tedious tasks web developers need to perform, by reducing the need to write boilerplate code, automatically managing assets (scripts and stylesheets), dependencies, libraries installation and integration, building and optimizing stuff for production, etc. More than a templating engine, Matisse is an architectural framework for your applications, and a different way of developing them. Installation ------------ [](#installation) To install this plugin on your application, using the terminal, `cd` to your app's directory and type: ``` workman install plugin electro-modules/matisse ``` > For correct operation, do not install this package directly with Composer. Overview -------- [](#overview) Matisse is a powerful templating system and explaining all its capabilities is beyond the scope of this Readme. We'll give you just a little overview of its main concepts and features, so that you may have a cursory idea of what it is and how it can be useful for rapidly creating complex web applications from composable building blocks. #### Templates [](#templates) Matisse templates are HTML text files where, besides common HTML tags (always lower cased), special tags, beginning with a capital letter, specify dynamic components. ##### Example [](#example) ``` Some HTML text Item {record.name} There are no items. ``` > **Note:** when writing templates, HTML markup should be written in HTML 5 syntax, while component tags must be written in XML syntax. This means tags must always be closed, even if the tag has no content (you can use the self-closing tag syntax: ``). Unlike XML though, attribute values are not required to be enclosed in quotes. #### Components [](#components) On the example above, `Input` is a component, not the common `input` HTML element. It is processed on the server, and it generates HTML markup that will replace its tag on the resulting HTML document. `For` is another component. It repeats a block of markup for each record on a list (array) of records. When there is data, `For` writes an header (if specified), followed by the repeatable content, followed by a footer (if specified). If there is no data, only the content of the `Else` subtag is output. #### Attributes [](#attributes) Component properties are represented by HTML tag attributes (ex. the `each` and `of` attributes of the `For` tag). You should **use attributes for defining properties having scalar values** (ex: string or numeric values). The syntax for an attribute is `name="value"`, `name='value'` or `name=value` (the later can be used only if the value has no spaces on it). Boolean attributes (those with `true` or `false` values) can be defined without specifiyng the values. Ex: `` for `true` and just `` (with the attribute missing) for `false`. #### Subtags [](#subtags) Subtags, like tags, are also capitalized, but they do not represent components; they represent properties of the enclosing component. In the example above, the optional content parts of the `For` component are defined with subtags: the `Header`, `Footer` and `Else` tags. **Use subtags when the property value is HTML markup**. Notice that a subtag's markup content may define additional components. #### Mixed HTML and XML markup [](#mixed-html-and-xml-markup) Again on the example above, notice how the `` tag is only closed inside the `` tag, seemingly violating the correct HTML tag nesting structure of the template. In reality, the template is perfectly valid and so is the generated HTML output. This happens because, for Matisse, all lower cased HTML tags are simply raw text, without any special meaning. All text lying between component tags (those beginning with a capital letter) is converted into as few as possible Text components. So, the real DOM (as parsed by Matisse) for the example above is (in pseudo-code): ``` ``` #### Data binding [](#data-binding) Data from a view model or from component properties can be automatically applied to specific places on the template. This is called "binding" data to the template. To bind data, you use "data binding expressions", which are enclosed in brackets. ##### Example [](#example-1) ``` ``` If you need to insert a binding expression on a javascript block containing brackets, you'll need to always insert a line break after each bracket that is **not** part of a binding expression. ##### Example [](#example-2) ``` if (x>y) { alert("Hello {name}, how are you?"); } ``` > In this example, the bracket on the first line of script is not mistaken for a binding expression delimiter, as it is immediately followed by a line break. #### Expression syntax [](#expression-syntax) The syntax for expressions differs from PHP expressions. For instance, accessing properties of an object or array is done with the dot operator, instead of the `[]` or `->` operators. Expressions can also define sequences of filters for applying multiple transformations to a value. The pipe operator `|` delimits the filters on an expression. The value from the leftmost part of the expression will flow from left to right, the result of the previous filter being fed to the next one. Filters may also have additional arguments. ##### Example [](#example-3) ``` ``` #### (Un)escaping output [](#unescaping-output) Binding expressions always HTML-encode (escape) their output, for security reasons. But if you really need to output raw markup, you can use the `*` filter. ##### Example [](#example-4) ``` {content|*} ``` #### Binding component properties [](#binding-component-properties) On composite components (those having their own templates), you can bind to the properties of the component (that owns the template) using the `@` operator. ##### Example [](#example-5) ``` ``` You'l see more examples of this type of binding on the section about "Macros", below. ### Implementing your own components [](#implementing-your-own-components) Each component tag is converted into an instance of a corresponding PHP class. When the template is rendered, each class instance is responsible for generating an HTML representation of the corresponding component, together with optional (embedded or external) javascript code and stylesheet references or embedded CSS styles. ##### Minimal component example [](#minimal-component-example) This is the smallest, simplest component that you may implement: ``` use Matisse\Components\Base\Component; class HelloWorld extends Component { protected function render () { echo "Hello World!"; } } ``` You would call this component from a template like this: ``` or ``` which would render: ``` Hello World! or Hello World! ``` ##### Minimal component with a property [](#minimal-component-with-a-property) Let's make our component's output text parameterizable: ``` use Matisse\Components\Base\Component; use Matisse\Properties\Base\ComponentProperties; class MessageProperties extends ComponentProperties { public $value = ''; } class Message extends Component { const propertiesClass = TextProperties::class; protected function render () { echo $this->props->value; } } ``` You would call this component from a template like this: ``` or some other text ``` which would render: ``` some text or some other text ``` #### Macros [](#macros) Components can also be defined with pure markup via template files, without any PHP code. Those templates are conceptually similar to parametric macros, so they are called *macro components*, or simply *macros*. ##### A more advanced component [](#a-more-advanced-component) This template defines a macro component that implements a customisable panel: ``` {@title} {@content|*} {@footer|*} ``` You can then create instances of this component like this: ``` Welcome Some text here... Some footer text... ``` When rendered, the template will generate the following HTML markup: ``` My title Welcome Some text here... Some footer text... ``` ### View Models [](#view-models) You may bind values from a view model into your template. For instance, given the following view model: ``` $model = ['footerText' => 'Some footer text...']; ``` you may call the same component, defined above, like this: ``` Welcome Some text here... {footerText} ``` The resulting output would be identical to the one from the previous example. ### More documentation [](#more-documentation) This was just a very short introduction to the Matisse template engine. Matisse provides many more advanced features to power-up your development (like Includes, Content Blocks, Typed Properties, Composite Components, Assets Management, Rule-based Presets, Metadata, Custom Filters, Auto-mapped Controllers, Service Importing, Javascript Code Generation and Client-side API, HTTP request handling and routing, and many more!...). Despite its current lack of documentation, Matisse is quite ready for use. In fact, we are using it, right now, on several projects at our company. We're sorry for the lack of documentation, but we're working on it. ### See also [](#see-also) Take a look at the [Matisse Components](https://github.com/electro-modules/matisse-components) plugin, if you want an extensive collection of Bootstrap-based components that you can use right away on your applications. License ------- [](#license) The Electro framework is open-source software licensed under the [MIT license](http://opensource.org/licenses/MIT). **Electro framework** - Copyright © Cláudio Silva and Impactwave, Lda. ### Health Score 36 — LowBetter than 82% of packages Maintenance36 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community22 Small or concentrated contributor base Maturity58 Maturing project, gaining track record Bus Factor1 Top contributor holds 98.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~103 days Recently: every ~424 days Total 22 Last Release 1274d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/750f00fdbb8cb2fd1c11c5c26b512217451bb001ac48a77542efa7123b9e2124?d=identicon)[impactwave](/maintainers/impactwave) --- Top Contributors [![claudio-silva](https://avatars.githubusercontent.com/u/1999803?v=4)](https://github.com/claudio-silva "claudio-silva (138 commits)")[![goncalomartins](https://avatars.githubusercontent.com/u/19184021?v=4)](https://github.com/goncalomartins "goncalomartins (1 commits)")[![paulocesarelias](https://avatars.githubusercontent.com/u/1014076?v=4)](https://github.com/paulocesarelias "paulocesarelias (1 commits)") --- Tags pluginelectro ### Embed Badge ![Health badge](/badges/electro-modules-matisse/health.svg) ``` [![Health](https://phpackages.com/badges/electro-modules-matisse/health.svg)](https://phpackages.com/packages/electro-modules-matisse) ``` ### Alternatives [kartik-v/yii2-widget-select2 Enhanced Yii2 wrapper for the Select2 jQuery plugin (sub repo split from yii2-widgets). 3279.7M191](/packages/kartik-v-yii2-widget-select2)[dereuromark/cakephp-ajax A CakePHP plugin that makes working with AJAX a piece of cake. 55255.9k1](/packages/dereuromark-cakephp-ajax)[dereuromark/cakephp-feed A CakePHP plugin containing a RssView to generate RSS feeds. 1353.7k1](/packages/dereuromark-cakephp-feed)[tomatophp/filament-menus Menu Database builder to use it as a navigation on Filament Panel or as a Livewire Component 306.3k3](/packages/tomatophp-filament-menus)[benjaminmedia/wp-polylang-theme-strings Polylang Theme Strings with support for Blade syntax 159.9k](/packages/benjaminmedia-wp-polylang-theme-strings)[dereuromark/cakephp-meta A CakePHP plugin for SEO meta tags, OpenGraph and Twitter Cards 1012.9k1](/packages/dereuromark-cakephp-meta) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)