Код проекта

Сайт в Velvio — обычный проект на React, Vite и Tailwind CSS. Код можно смотреть и править прямо в браузере, а на платных тарифах — забрать себе целиком.

Зачем править код самому, если есть чат:

• Бесплатно. Сохранение правки кода не тратит кредиты.
• Точно. Меняется ровно то, что вы написали, — ИИ ничего не додумывает.
• Быстро. Без очереди: сохранили — через несколько секунд сайт обновился.

Открыть код

1. Откройте проект и выберите раздел «Код» в меню проекта слева. На телефоне меню открывается кнопкой ☰ слева вверху.
2. Слева — дерево файлов, в центре — редактор, справа — превью сайта. Превью можно спрятать кнопкой «Превью», чтобы редактору было просторнее.
3. Чтобы посмотреть код другой версии, выберите её в списке версий рядом с названием проекта. Старые версии открываются только для чтения.

Полезно знать, где что лежит:

• src/pages/ — страницы сайта, по папке на страницу;
• src/components/ — общие блоки: шапка, подвал, карточки;
• src/router/config.jsx — список страниц и их адресов;
• src/mocks/ — данные сайта: услуги, цены, отзывы, товары;
• src/index.css — цвета и шрифты;
• project_plan.md — план сайта, который ведёт ИИ.

Править код

1. Откройте файл в дереве слева и правьте прямо в редакторе. Работают привычные клавиши: Ctrl+Z — отменить, Ctrl+F — найти и заменить, Tab — отступ.
2. Изменённые файлы отмечаются точкой в дереве. Можно поправить несколько файлов — они сохранятся вместе, одной версией.
3. Нажмите «Сохранить» или Ctrl+S (на Mac — Cmd+S).

Появится новая версия «Правка кода», сайт соберётся, и превью обновится — обычно за 10–20 секунд.

Передумали до сохранения — нажмите «Отменить изменения», код вернётся к сохранённой версии. Передумали после — откатите версию, как любую другую, — см. Версии и откат.

Файлы и папки

Нажмите на файл или папку правой кнопкой мыши (или на ⋯ справа от названия):

• Новый файл и Новая папка — в выбранной папке. Кнопки «Файл» и «Папка» над деревом создают их в корне проекта. Путь можно писать целиком, например src/components/Promo.jsx — недостающие папки появятся сами.
• Переименовать — можно поменять и папку, где лежит файл.
• Удалить — файл или папку целиком.

Создание, переименование и удаление применяются тоже по «Сохранить».

Что нельзя:

• README.md создаётся автоматически — он открыт только для чтения.
• Картинки, видео, документы в коде не создаются — загружайте их в раздел «Файлы» и вставляйте ссылкой.
• Новые пакеты npm не подключаются: сайт собирается с готовым набором библиотек, их список — в package.json. Нужна новая возможность — попросите ИИ, он сделает её на том, что уже есть.

Если сайт не собрался

Ошибка в коде — опечатка, незакрытый тег, удалённый нужный файл — не даст сайту собраться. Тогда Velvio сразу запустит автопочинку: ИИ получит текст ошибки, найдёт причину и исправит её минимальными правками, стараясь сохранить ваши изменения. Это бесплатно — кредиты не списываются.

Ход починки виден в чате в разделе «Редактор» — отдельной карточкой «Автопочинка · бесплатно» с текстом ошибки. Когда ИИ закончит, появится новая собранная версия.

Бесплатных автопочинок — до 20 в сутки. Если лимит закончился или ИИ на паузе, исправьте код сами, напишите в чат «почини сборку» или откатите версию.

Перейти от элемента к коду

Выберите элемент в редакторе и нажмите «Код» на панели над ним — откроется нужный файл, курсор встанет на строку элемента, а сам тег выделится.

Скачать архив

Меню «⋯» справа вверху → «Скачать код (zip)». В архив попадает версия, открытая сейчас в редакторе, вместе со всеми фото (в папке public/images/).

Чтобы запустить сайт у себя, нужен Node.js. В папке проекта выполните:

npm install
npm run dev

Команда npm run build собирает готовый сайт в папку out/. Его можно выложить на любой хостинг статических сайтов.

Скачивание кода доступно на тарифах Starter, Pro и Agency. В карточке тарифа это отмечено как «Экспорт кода». Править код в браузере можно на всех тарифах.

Вопросы и ответы

Сколько стоит правка кода?

Ничего. Сохранение и сборка бесплатны, автопочинка после ошибки сборки — тоже. Кредиты тратятся только на запросы к ИИ в чате.

Почему редактор открыт только для чтения?

Так бывает в трёх случаях: открыта не текущая версия (сделайте её текущей в списке версий), сейчас работает ИИ (дождитесь конца прохода) или это README.md — он создаётся автоматически.

Пока я правил код, ИИ закончил другую правку. Что будет с моими изменениями?

Сохранить их поверх новой версии нельзя — иначе правка ИИ потерялась бы. Появится сообщение «Сайт успел обновиться». Скопируйте свои изменения, откройте раздел «Код» заново и внесите их ещё раз.

Не сохранил и ушёл в другой раздел — правки пропали?

Нет. Несохранённые правки живут, пока открыта вкладка браузера: вернитесь в «Код» и сохраните. Если закрыть вкладку, браузер предупредит, что есть несохранённые изменения.

Автопочинка изменила не то, что я хотел. Как вернуть?

Откройте список версий: у вашей правки своя версия «Правка кода», у починки — следующая. Сделайте нужную текущей или откатите починку. Возвращать кредиты не нужно — автопочинка бесплатная.

ИИ потом не «откатит» мои ручные правки?

Нет. ИИ работает с текущим кодом — вашими правками в том числе — и меняет только то, о чём его просят.

Советы

• Короткие точные правки — текст, цену, ссылку, цвет — быстрее сделать самому. Новые блоки, страницы и логику проще поручить ИИ в чате.
• Данные сайта (услуги, цены, отзывы) обычно лежат в src/mocks/ — править их там надёжнее, чем в разметке.
• Ошибки и сообщения сайта видны в инструментах разработчика браузера: Ctrl+Shift+I (Windows) или Cmd+Option+I (Mac), вкладка «Console».
• Изменения, сделанные в скачанном коде, в Velvio не возвращаются. Правьте код здесь, а архив берите как резервную копию.