Редактор, который приближает код к визуальному результату.

ЗАДАЧА

Сократить расстояние между идеей и макетом.

Визуальный редактор помогает понять, как устроена страница: на сцене виден элемент, рядом находятся его свойства, а в итоговом проекте формируется веб-код.

Ключевые функции концепции

• Палитра компонентов: текст, кнопки, изображения, контейнеры и элементы форм.
• Рабочая область с сеткой и привязкой для выравнивания.
• Выбор объекта, перемещение и изменение размера за маркеры.
• Отмена и повтор действий, копирование и вставка.
• Настройка свойств элемента и экспорт HTML/CSS/JS.

Чему учит такой проект

Он заставляет явно разделить модель объекта, его отображение на холсте и свойства, которые попадут в экспорт. Это та же задача, что возникает в серьёзных редакторах интерфейсов: изменения на сцене должны соответствовать данным и сохраняться в проекте.