1. Начало Работы
GB Coder работает полностью в вашем браузере без удаленных серверов и учетных записей.
Системные Требования и Браузеры
Статический редактор работает в любом современном браузере с поддержкой IndexedDB и ES2020. Для WebContainer IDE требуется SharedArrayBuffer и изоляция COOP/COEP (Chrome, Edge, Brave, Firefox).
Создание Первого Проекта
Перейдите на страницу /app/projects и нажмите «Новый проект», чтобы выбрать статическую среду, шаблон React или среду WebContainer.
2. Статический Редактор HTML/CSS/JS
Мгновенное отображение изменений без сборки.
Работа в Трех Панелях
Редактируйте HTML, CSS и JavaScript в отдельных окнах с живым предпросмотром.
<!-- index.html -->
<div class="card">
<h1>Привет, GB Coder</h1>
<button id="btn">Кликов: 0</button>
</div>
<script>
let n = 0;
document.getElementById('btn').onclick = () => { n++; document.getElementById('btn').textContent = `Кликов: ${n}`; };
</script>Подключение CDN-Библиотек
Подключайте Tailwind CSS, Bootstrap или React прямо через CDN-ссылки.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />3. Каталог Шаблонов
Готовые стартовые наборы для веб-разработки.
Выбор Шаблона
Шаблоны для лендингов, панелей управления и прототипов компонентов.
Многофайловая Структура
Поддержка подпапок, модулей CSS и импортов ES Modules.
4. Разработка на React и Vue
Компонентная разработка в браузере.
Компоненты React 18
Поддержка JSX и TypeScript с быстрой перезагрузкой компонентов.
import React, { useState } from 'react';
export default function App() {
const [c, setC] = useState(0);
return <button onClick={() => setC(c + 1)}>Кликов: {c}</button>;
}Однофайловые Компоненты Vue 3 (.vue)
Редактируйте файлы .vue с template, script setup и стилями с мгновенной браузерной компиляцией.
5. IDE WebContainer и Терминал
Полноценная среда Node.js и серверы Vite внутри браузера.
Терминал xterm.js
Выполняйте npm install и команды package.json прямо во вкладке браузера.
npm install
npm run devПроброс Портов в Предпросмотр
Серверы разработки автоматически подключаются ко встроенному окну предпросмотра.
6. Локальное Хранилище и Приватность
Ваш код остается в безопасности в базе данных IndexedDB.
Архитектура IndexedDB
Файлы сохраняются в локальной базе данных gb-coder-projects-db.
Работа без Интернета
Продолжайте писать код даже при отсутствии сетевого подключения.
7. Бэкапы и Экспорт ZIP
Удобный экспорт и восстановление проектов.
Экспорт ZIP с Хэшем SHA-256
Скачивайте полные проекты в виде ZIP-архивов с проверкой контрольной суммы.
Безопасный Импорт
Перетащите ZIP-файл в панель проектов для быстрого восстановления.
8. Поиск по Проекту и Горячие Клавиши
Ускорение повседневной работы с кодом.
Горячие Клавиши
Ctrl+S для сохранения, Ctrl+P для переключения файлов, Ctrl+` для терминала.
Глобальный Поиск
Быстрый поиск и замена по всем файлам проекта с поддержкой regex.
9. Решение Проблем и Совместимость
Устранение частых затруднений.
Кнопка WebContainer Неактивна
Убедитесь, что сайт открыт по HTTPS и активны заголовки изоляции COOP/COEP.
Сброс Кэша Браузера
Используйте Ctrl+Shift+R для принудительного обновления устаревших файлов.