Build full-stack and completely reactive user interfaces with PHP
Painlessly and quickly create powerful interactive web applications.
There's no need to reinvent the wheel every single time!
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!
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.
Html template
We won't send you spam. Unsubscribe at any time.
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.
<?php namespace Application\Components\Views\Demo\SimpleComponent; use Viewi\BaseComponent; class HelloMessage extends BaseComponent { public string $name; }
<div>Hello $name</div>
<HelloMessage name="James" />
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.
<?php namespace Application\Components\Views\Demo\SimpleComponent; use Viewi\BaseComponent; class Counter extends BaseComponent { public int $count = 0; public function increment() { $this->count++; } }
<button (click)="increment()">Clicked $count times.</button>
<Counter />
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.
<?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 = ''; } }
<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>
<?php namespace Application\Components\Views\Demo\TodoApp; use Viewi\BaseComponent; class TodoList extends BaseComponent { public array $items; }
<ul> <li foreach="$items as $item">$item</li> </ul>
<TodoApp />
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.
marked.min.js
... <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> ...
<?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; } }
<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>
<MarkdownJs />