Вкладка «Код» — читайте и меняйте код приложения

КраткоНа вкладке «Код» все файлы приложения показаны деревом папок, а рядом — редактор. Нажмите на файл, чтобы прочитать его, внесите изменения и нажмите «Сохранить» (или ⌘S / Ctrl+S); каждое сохранение становится версией, к которой можно вернуться. Приложения создаются на TanStack Start, React и TypeScript. Код принадлежит вам — скачайте его в разделе «Настройки проекта → Экспорт» или храните в GitHub.

Открывать код никогда не обязательно — MonstarX сам его пишет и меняет. Но он весь на виду, когда вы (или разработчик, с которым вы работаете) захотите заглянуть. На вкладке Код видны все файлы приложения, и там можно вносить свои изменения.

Что показывает вкладка «Код»?

Слева — дерево папок со всеми файлами приложения. Справа — выбранный файл с подсветкой кода и номерами строк.

Вкладка «Код»: слева дерево с папками migrations и src, справа в редакторе открыт файл src/routes/schedule.tsx

На телефоне нажмите на имя файла вверху, чтобы открыть дерево на выдвижной панели.

Что где лежит?

Знать это не обязательно, но помогает, когда читаете код:

Папка или файл	Что в ней
`src/routes/`	По файлу на страницу: `index.tsx` — главная страница, `pricing.tsx` — страница `/pricing`.
`src/components/`	Части, которые используются на нескольких страницах, например шапка и подвал.
`src/server/`	Код, который работает на сервере: сохраняет запись, читает расписание.
`src/db/`	Структура данных приложения.
`migrations/`	Шаги, которые создают и меняют таблицы базы данных.
`public/`	Файлы, которые отдаются как есть, например значки.
`src/styles.css`	Цвета, шрифты и другое оформление.

На чём создано моё приложение?

MonstarX создаёт современные веб-приложения. Вот на чём они построены:

TypeScript — JavaScript с проверками, которые ловят ошибки ещё до запуска приложения;
React — самый популярный способ создавать веб-интерфейсы;
TanStack Start — фреймворк, который превращает страницы React в полноценное приложение с сервером, чтобы страницы быстро загружались, а данные надёжно хранились на сервере;
Tailwind CSS — набор инструментов оформления для цветов, отступов и вёрстки.

То же самое показывает карточка проекта на странице проектов, например TanStack Start · React · TypeScript. Импортированное приложение остаётся на тех технологиях, на которых было создано.

Как отредактировать файл самому?

Откройте вкладку Код и нажмите на файл в дереве.
Нажмите в редакторе и внесите изменения. Вверху появятся надпись Не сохранено и кнопки Отменить и Сохранить.
Нажмите Сохранить или ⌘S (Mac) либо Ctrl+S (Windows). Предпросмотр сразу обновится.

Каждое сохранение становится версией с названием Правка и путём к файлу, например Правка src/routes/schedule.tsx, так что, если что-то пойдёт не так, можно вернуться. Если проект связан с GitHub и включена автоматическая отправка (так по умолчанию), изменение попадёт и туда. MonstarX увидит вашу правку, когда вы в следующий раз о чём-нибудь его попросите.

Кнопка Отменить удаляет несохранённые изменения.

Когда редактировать нельзя?

Пока MonstarX меняет приложение. До окончания его работы файлы доступны только для чтения: MonstarX изменяет приложение. До завершения работы файлы доступны только для чтения.
Когда файл изменился, пока вы его редактировали. Если MonstarX или кто-то другой за это время сохранил файл, появится сообщение Этот файл изменился после того, как вы начали редактирование., а кнопка Сохранить станет неактивной. Ваш черновик сохраняется, пока вы его не отмените, — можно сравнить, отменить и внести изменение заново.
Файлы, которыми управляет MonstarX. В приложениях, которые создаёт MonstarX, файлы настроек (например, package.json и конфигурация Vite и TypeScript) и встроенные сервисы для аккаунтов, базы данных, почты, хранилища и ИИ обслуживает MonstarX. В дереве их нет, но они есть в ZIP-архиве при экспорте.
Доступ только для просмотра. Люди, с которыми проектом поделились с правом Можно просматривать и комментировать, видят надпись Только просмотр: вы можете читать код, но не изменять его. Те, у кого есть право Можно редактировать, могут редактировать и сохранять файлы так же, как вы.

Можно ли скачать свой код?

Да. Код принадлежит вам: всё, что вы создаёте в MonstarX, ваше, включая код, который он пишет. Забрать его можно двумя способами:

Скачать ZIP-архив — НастройкиЭкспорт в рабочем пространстве, затем Скачать .zip. Вы получите самостоятельный проект, который запускается на вашем компьютере. Подробнее — в статье Экспорт кода.
Хранить в GitHub — свяжите проект с репозиторием, и каждое изменение станет коммитом. Подробнее — в статье GitHub.

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

Нужно ли уметь программировать, чтобы пользоваться MonstarX?

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

Отменит ли MonstarX мои собственные правки?

Нет. Он читает файлы в том виде, в каком они есть, когда вы отправляете следующий запрос, — вместе с вашими правками. Если хотите, чтобы он знал, зачем вы что-то изменили, напишите об этом в чате.

Можно ли создать новый файл на вкладке «Код»?

На вкладке «Код» можно редактировать существующие файлы. Чтобы создать новые страницы или файлы, попросите MonstarX в чате.

Как добавить пакет или библиотеку?

Попросите в чате, например: «Используй библиотеку выбора даты для формы записи». MonstarX сам добавит пакеты.

Кому принадлежит код, который пишет MonstarX?

Вам. В условиях MonstarX сказано, что ваши запросы, файлы, код и приложения принадлежат вам и вы можете экспортировать их в любой момент.