This site is built with Viewi itself. It is experimental and still in development. If you see any bugs please do not hesitate and open an issue or DM me on Twitter.

Viewi

Build full-stack and completely reactive user interfaces with PHP

Get Started

Easy to use

Painlessly and quickly create powerful interactive web applications.

  • Already familiar HTML.
  • PHP dynamic data state.
  • Efficient SSR/CSR.
  • SEO friendly.
  • No HTML over AJAX.

Write only once

There's no need to reinvent the wheel every single time!

  • The same code for server and front-end sides.
  • Speed up your development process.
  • Turn your components into highly-optimized JavaScript code.
  • Use it to build mobile and desktop applications.

Why Viewi ?

Typical JavaScript frameworks require you to write a lot of extra code. From learning frameworks like Vue js, to the fact that your SEO will suffer, it's just more trouble than it's worth.

With Viewi, you can write your front-end application with your favorite PHP and HTML. Viewi makes sure the results are rich and dynamic. It gives you a simple start in full-stack development, and reduces your server costs. You can run Viewi even on the cheapest shared hostings.

It's sleek, lean, and clean!

How Viewi Works

Viewi takes your components with templates and converts them into special HTML tokens and JavaScript code. This way you don't need to duplicate your logic twice. And it keeps to be SEO friendly and fully dynamic out of the box.

Viewi is not bound to specific framework and has its own template engine which is so simple to use. It also has built in Router and renders new pages without interaction with the server.

Todo app php code
Todo app js code

Html template

Todo app html template

See Viewi in Action

A Simple Component

Viewi component takes all the input data and assigns them to public properties. To render property in the HTML just use it as a PHP variable.

HelloMessage.php
<?php

namespace Application\Components\Views\Demo\SimpleComponent;

use Viewi\BaseComponent;

class HelloMessage extends BaseComponent
{
    public string $name;
}
HelloMessage.html
<div>Hello $name</div>
Usage
<HelloMessage name="James" />
Result
Hello James

A Reactive Component

Components in Viewi react to events caused by browser or user interactions. Any PHP expression can be easily assigned as an event handler. All the changes will update HTML accordingly.

Counter.php
<?php

namespace Application\Components\Views\Demo\SimpleComponent;

use Viewi\BaseComponent;

class Counter extends BaseComponent
{
    public int $count = 0;

    public function increment()
    {
        $this->count++;
    }
}
Counter.html
<button (click)="increment()">Clicked $count times.</button>
Usage
<Counter />
Result

An Application

By combining different components together we can create a simple Todo application. Each component will have its own logic without affecting the parent application. Data can be passed to the child component through properties. Event handlers track all the changes that user has made.

TodoApp.php
<?php

namespace Application\Components\Views\Demo\TodoApp;

use Viewi\BaseComponent;
use Viewi\DOM\Events\DOMEvent;

class TodoApp extends BaseComponent
{
    public string $text = '';
    public array $items = [];

    public function handleSubmit(DOMEvent $event)
    {
        $event->preventDefault();
        if (strlen($this->text) == 0) {
            return;
        }
        $this->items[] = $this->text;
        $this->text = '';
    }
}
TodoApp.html
<div>
    <h2>Todo</h2>
    <form (submit)="handleSubmit($event)">
        <label for="new-todo">What needs to be done?</label>
        <input id="new-todo" type="text" model="$text" autocomplete="off">
        <button>
            Add #{count($items) + 1}
        </button>
    </form>
    <TodoList items="$items" />
</div>
TodoList.php
<?php

namespace Application\Components\Views\Demo\TodoApp;

use Viewi\BaseComponent;

class TodoList extends BaseComponent
{
    public array $items;
}
TodoList.html
<ul>
    <li foreach="$items as $item">$item</li>
</ul>
Usage
<TodoApp />
Result

Todo

A Component Using External Javascript

Viewi allows you to use custom JavaScript which makes it possible to integrate with external libraries and frameworks. For example, using marked library we convert the text into markdown HTML in real time.

Include marked.min.js
...
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
...
MarkdownJs.php
<?php

namespace Application\Components\Views\Demo\ExternalIntegration;

use Viewi\BaseComponent;

class MarkdownJs extends BaseComponent
{
    public string $markText = '# Marked in browser\n\nRendered by **marked**.';

    public function getMarkedHtml($text){
        // to insert custom jsvascript
        // just use heredoc syntax with `javascript` keyword
        <<<javascript
        return marked(text);
        javascript;
    }
}
MarkdownJs.html
<h3>Input</h3>
<label for="markdown-text">
    Enter some markdown
</label>
<textarea id="markdown-text" model="$markText"></textarea>
<h3>Output</h3>
<div>{{getMarkedHtml($markText)}}</div>
Usage
<MarkdownJs />
Result

Input

Output

Excited ? Then let's Get Started