Мир движется вперёд: сейчас можно не только «перетаскивать блоки мышкой», но и получать из этого чистый код, который реально можно развивать. TeleportHQ (teleporthq.io) — как раз такой сервис: визуальный редактор, где вы собираете страницу, а на выходе получаете готовый HTML/CSS/JS или проект под популярные фреймворки вроде React, Next, Vue, Nuxt и Angular. Экспорт кода заявлен как ключевая фича прямо на официальном сайте, причём бесплатно на старте.
Как это выглядит в работе: вы заходите в редактор, собираете страницу, смотрите живой превью, публикуете на поддомен или выгружаете код и разворачиваете у себя. Есть и кнопка деплоя на Vercel (хостинг)— нажимаешь её, и страница, которую ты собрал(а), автоматически публикуется в интернете на тестовом адресе.
Как с этим работают?
Зарегистрировались.
Собрали страницу из готовых элементов и своих компонентов, посмотрели, как она ведёт себя на разных размерах экрана.
Опубликовали одним кликом на поддомен или подключили свой домен / Vercel.
Экспортировали код: можно скачать проект с разметкой и стилями или сразу как проект под React/Next/Vue/Nuxt/Angular. По справке экспорт формирует проект на базе Next.js — удобно для дальнейшей доработки разработчиком.
Если вы дизайнер и работаете в Figma, есть официальный плагин: переносите макет в TeleportHQ и получаете код для React/Next/Vue/Nuxt/Angular или «голый» HTML/CSS. В помощи есть инструкция и список ограничений (например, не всё из эффектов Figma поддерживается плагином).
Платно это или бесплатно?
Есть Free-тариф: можно начать бесплатно, публиковать и экспортировать код, но с лимитами (например, 1 проект, 3 страницы на проект, ограничение на просмотры/выгрузки кода, базовый хостинг). Для команд — Professional: больше проектов и ресурсов, свои домены, техподдержка. Актуальные детали и цены можно посмотреть на странице тарифов.
Как это можно связать с WordPress?
TeleportHQ не плагин для классического WordPress-редактора, как Elementor. Это визуальный редактор снаружи и фронтенд-платформа: вы собираете интерфейс, публикуете статику или забираете код и развиваете как обычный фронтенд-проект. С CMS TeleportHQ стыкуется через headless-подход (я писала про это в посте: https://vk.com/wall-166484137_15194).
Кто может воспользоваться?
— Тот, кто хочет быстро собрать лендинг и сразу получить код, и потом передать разработчику.
— Команда: дизайнер вносит правки визуально, маркетолог публикует, разработчик вытаскивает код и интегрирует в проект.
— Тот, кто строит headless-архитектуру: фронтенд на React/Next/Vue и контент из CMS через API.
Пробовали TeleportHQ вживую — переносить макет из Figma и смотреть, что выходит на экспорт? Если делали, расскажите в комментах, где было удобно, а где больно.