Streamlit: приложения на Python без HTML и CSS

Если ты искал способ быстро показать коллегам результат анализа данных или проверить гипотезу без найма фронтенд-разработчика, наверняка натыкался на слово Streamlit. Это open-source библиотека для Python, которая берёт обычный скрипт и превращает его в работающее веб-приложение: с кнопками, полями ввода, графиками и таблицами. Разберём, что это такое, чем она отличается от подхода курса skillmake на Next.js и Claude Code, для каких задач она удобнее, а для каких — нет, и когда её вообще стоит брать в работу.

Что такое Streamlit и как он работает

Streamlit — библиотека для языка Python, которая позволяет собрать веб-интерфейс, не открывая ни одного HTML-файла. Пишешь обычный python-скрипт, добавляешь в него несколько специальных команд и запускаешь. Библиотека сама рисует страницу в браузере: заголовки, кнопки, поля ввода, графики появляются из тех строк кода, которые ты добавил.

Разница с обычной веб-разработкой в том, откуда берётся интерфейс. На курсе skillmake ты работаешь с Claude Code, который пишет отдельно фронтенд (то, что видит пользователь: React-компоненты, CSS-стили, вёрстку на Next.js) и отдельно бэкенд (логику, которая обрабатывает данные). Это два разных слоя, и между ними идёт обмен данными через API.

В Streamlit слоя фронтенда как отдельной сущности нет. Ты описываешь только логику: что показать, что посчитать, на что среагировать. Библиотека сама превращает эти команды в HTML, CSS и JavaScript у себя внутри, скрыто от тебя. При каждом действии пользователя — нажал кнопку, ввёл число, загрузил файл — весь python-скрипт выполняется заново сверху вниз, и Streamlit перерисовывает страницу с учётом новых значений.

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

import streamlit as st

st.title("Анализ файла с рекордами")
uploaded_file = st.file_uploader("Загрузи CSV с результатами игры")

if uploaded_file is not None:
    import pandas as pd
    data = pd.read_csv(uploaded_file)
    st.dataframe(data)
    if st.button("Показать средний счёт"):
        st.write(f"Средний результат: {data['score'].mean()}")

Здесь st.title рисует заголовок страницы, st.file_uploader — кнопку загрузки файла, st.dataframe — интерактивную таблицу, st.button — кликабельную кнопку. Ни строчки CSS, ни одного тега <div>. Библиотека сама решает, как это будет выглядеть: отступы, шрифты, цвета кнопок — всё по умолчанию, в едином фирменном стиле Streamlit.

Логика «выполнить скрипт заново при любом клике» звучит непривычно для тех, кто раньше видел веб-разработку через React или подобные инструменты. Там компонент обновляет только тот кусок страницы, который изменился, а состояние живёт отдельно от разметки. В Streamlit подход проще и грубее: нажал кнопку — весь файл прогнался с начала до конца ещё раз, только с новым значением этой кнопки. Для небольших скриптов разница незаметна, счёт идёт на доли секунды. Для тяжёлых вычислений — загрузки большого файла, обучения модели, сложных запросов к базе — библиотека предлагает механизм кеширования, о котором дальше.

Именно в этом главная идея инструмента. Обычно между «у меня есть код, который что-то считает» и «у меня есть сайт, где это можно посмотреть» лежит работа фронтенд-разработчика: вёрстка, стили, обработка кликов на JavaScript. Streamlit убирает этот шаг для определённого класса задач — тех, где не нужен уникальный дизайн, а нужен рабочий интерфейс здесь и сейчас.

Какие виджеты и приёмы есть в Streamlit

У библиотеки большой набор готовых элементов интерфейса, и почти все они вызываются одной строкой. Разберём самые ходовые, чтобы было понятно, из чего в принципе собирается типичное приложение.

Ввод данных. st.text_input — однострочное поле для текста, st.number_input — поле для чисел, st.selectbox — выпадающий список, st.slider — ползунок для выбора числа или диапазона, st.checkbox — галочка, st.radio — переключатель из нескольких вариантов, st.date_input — выбор даты. Каждый такой виджет сразу возвращает значение, которое можно использовать в следующей строке кода.

Вывод данных. st.write — универсальная функция, которая умеет показать почти что угодно: текст, число, таблицу, объект. st.dataframe рисует интерактивную таблицу с сортировкой и прокруткой, st.table — простую статичную таблицу, st.metric — крупную цифру с подписью и стрелкой роста или падения, удобно для ключевых показателей на дашборде.

Графики. У Streamlit есть встроенные простые графики — st.line_chart, st.bar_chart, st.area_chart — для быстрой визуализации без лишних настроек. Для более сложных графиков библиотека умеет встраивать сторонние инструменты для визуализации данных на Python, так что готовый график из привычной библиотеки достаточно передать напрямую в функцию отрисовки.

Раскладка страницы. Хотя кастомную вёрстку Streamlit не даёт, базовое управление расположением элементов есть. st.sidebar выносит виджет в боковую панель — там обычно держат фильтры и настройки, чтобы не загромождать основную область. st.columns делит пространство на несколько колонок в ряд. st.tabs создаёт вкладки внутри одной страницы. st.expander прячет часть содержимого под раскрывающийся блок.

Кеширование. Декоратор @st.cache_data над функцией говорит библиотеке: если функцию вызвали второй раз с теми же аргументами, не пересчитывать заново, а взять готовый результат. Это критично для тяжёлых операций — если каждое нажатие кнопки на странице пересчитывает весь скрипт заново, без кеширования долгая загрузка файла или обращение к внешнему сервису будет повторяться на каждый клик, даже если сами данные не изменились.

Состояние между действиями. st.session_state — это словарь, который живёт, пока открыта вкладка браузера, и не сбрасывается при перерисовке страницы. Он нужен, когда одного пересчёта скрипта недостаточно: например, приложение должно помнить, сколько раз пользователь нажал кнопку, или хранить промежуточный результат до следующего шага.

Ниже — пример чуть сложнее первого, с боковой панелью, колонками и графиком, тоже иллюстративный:

import streamlit as st
import pandas as pd

st.title("Дашборд по рекордам «Змейки»")

with st.sidebar:
    min_score = st.slider("Минимальный счёт", 0, 100, 10)

data = pd.read_csv("scores.csv")
filtered = data[data["score"] >= min_score]

col1, col2 = st.columns(2)
col1.metric("Игроков в выборке", len(filtered))
col2.metric("Средний счёт", round(filtered["score"].mean(), 1))

st.line_chart(filtered.set_index("date")["score"])

Здесь видно, как из отдельных виджетов складывается рабочий дашборд: фильтр в боковой панели, две метрики рядом в колонках и график под ними. Всё это без единой строчки CSS и без вопроса «как расположить блоки на экране» — библиотека решает его сама.

Чем это отличается от подхода курса skillmake

На курсе ты собираешь «Змейку» связкой Next.js и Claude Code, и это принципиально другой путь. Стоит проговорить разницу честно, без прикрас в любую сторону.

Next.js — фреймворк, который даёт полный контроль над тем, как выглядит и ведёт себя приложение. Claude Code пишет под твои задачи собственные компоненты, свою вёрстку, свою анимацию. Итоговый продукт может выглядеть как угодно: с фирменными цветами, кастомными кнопками, уникальной раскладкой под мобильный экран. Именно так рождается игра, которую не спутаешь ни с одним шаблоном.

Streamlit устроен ровно наоборот: он берёт на себя весь дизайн и не даёт особо этот дизайн менять. Есть готовый набор виджетов — заголовки, слайдеры, чекбоксы, таблицы, графики, — и все они выглядят «по-стримлитовски». Можно подкрутить тему через настройки: цвет фона, акцентный цвет, шрифт. Но кастомную вёрстку с нуля, сложную анимацию и уникальный пользовательский опыт Streamlit не даёт в принципе. Это не недоработка, а осознанное решение авторов библиотеки: они выигрывают время разработчика ценой свободы в дизайне.

Представь конкретную задачу: нужно, чтобы кнопка «Начать игру» пульсировала, меняла форму при наведении и была нарисована в фирменном стиле проекта. В Next.js это обычная работа с CSS и Claude Code опишет такую анимацию по запросу за пару итераций. В Streamlit у кнопки есть текст, есть состояние «нажата» или «не нажата» — и практически всё, тонкую визуальную настройку библиотека для таких элементов не предусматривает.

Отсюда разница и в результате. Next.js-приложение можно опубликовать как отдельный продукт для широкой аудитории: с адаптацией под телефоны, брендингом, SEO-страницами, витриной для посторонних людей. Streamlit-приложение обычно живёт как внутренний инструмент: дашборд для команды, форма для сбора данных, демонстрация модели заказчику. Пользователь такого приложения обычно сразу понимает, что перед ним рабочий прототип, а не отполированный продукт, и это нормально для его задачи.

Ниже — сравнение по ключевым параметрам, чтобы разница была видна сразу.

Ни один из вариантов не «лучше» в абсолютном смысле — они решают разные задачи. Вопрос в том, что тебе нужно на выходе: быстрый рабочий инструмент для себя и команды или полноценный продукт для посторонних людей.

Для кого подходит Streamlit

Streamlit родился в среде дата-сайентистов, и это видно по тому, для кого он удобнее всего.

Аналитики и дата-сайентисты. Человек, который работает с таблицами, графиками и моделями в Python, обычно не хочет тратить недели на изучение фронтенда ради того, чтобы показать результат коллегам. Streamlit даёт возможность взять готовый код анализа и за час обернуть его в интерфейс, где можно загрузить свой файл, покрутить параметры и увидеть график.

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

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

Преподаватели и исследователи. Показать на живом примере, как ведёт себя алгоритм при разных параметрах — распространённый сценарий в образовании и науке. Слайдер, который меняет параметр модели, и график, который сразу перерисовывается, объясняют идею быстрее, чем статичная презентация.

Когда лучше сразу брать Next.js и Claude Code, а не Streamlit:

• нужен кастомный внешний вид, который узнают и запомнят пользователи;
• приложение рассчитано на широкую публику, а не на команду из нескольких человек;
• планируется мобильное приложение или PWA с офлайн-режимом;
• важна скорость отклика интерфейса при большом количестве одновременных пользователей — Streamlit пересчитывает весь скрипт заново при каждом действии, и это не самый быстрый способ обработки нагрузки;
• нужен полноценный продукт с оплатой, аккаунтами пользователей и публичной витриной — как раз то, что собирают на курсе skillmake.

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

На что обратить внимание при работе со Streamlit

У инструмента есть несколько особенностей, которые стоит знать заранее, чтобы не удивляться им в процессе.

Модель полного перезапуска скрипта. Об этом уже говорилось выше, но это стоит держать в голове при проектировании логики: любое действие пользователя перезапускает весь файл. Если в скрипте есть тяжёлые операции без кеширования — обращение к внешнему API, сложные вычисления, чтение большого файла с диска, — они будут повторяться на каждый клик. Привычка сразу оборачивать такие места в @st.cache_data экономит и время ожидания, и нагрузку на сервер.

Одностраничность по умолчанию. Базовое приложение — это одна страница сверху вниз. Для более сложной навигации, с несколькими самостоятельными разделами, у библиотеки есть отдельный механизм многостраничных приложений, но это уже требует продуманной структуры проекта, а не просто добавления новой функции.

Состояние легко потерять. Начинающие часто удивляются, почему переменная, которую посчитали на одном шаге, «исчезла» на следующем. Причина та же: скрипт выполняется заново, и обычные переменные не сохраняются между запусками. Для этого и существует st.session_state — данные, которые нужно помнить между действиями пользователя, кладут именно туда, а не в обычную переменную.

Секреты и доступ к данным. Если приложение обращается к базе данных или внешнему API с закрытым ключом, ключ не должен лежать прямо в коде, который попадает в публичный репозиторий. У Streamlit есть отдельный механизм для хранения таких значений — секреты приложения, которые не публикуются вместе с кодом. Общий принцип тот же, что и в любой другой веб-разработке: пароли, токены и ключи доступа держат отдельно от исходного кода.

Открытость приложения по умолчанию. Ссылка на опубликованное через Community Cloud приложение обычно доступна любому, у кого она есть, если не настроено иначе. Для внутреннего инструмента с чувствительными данными это важно проверить заранее и посмотреть, какие есть настройки доступа у конкретного способа публикации.

Путь от идеи до рабочего приложения на практике

Чтобы разница со «Змейкой» на курсе была понятнее не в теории, а на уровне процесса, разберём, как обычно выглядит работа над Streamlit-проектом от начала до конца.

Всё начинается не с интерфейса, а с логики. Прежде чем добавлять хоть один виджет, пишут обычный python-код, который решает саму задачу: читает файл, считает нужные показатели, строит график средствами привычной библиотеки для анализа данных. На этом этапе Streamlit вообще не участвует — это чистая работа с данными, которую можно проверить прямо в блокноте или в консоли.

Дальше в код добавляют import streamlit as st и расставляют вызовы виджетов вокруг уже готовой логики: заголовок сверху, поле загрузки файла там, где раньше было жёстко прописанное имя файла, кнопку — там, где раньше просто вызывалась функция. По сути, интерфейс наслаивается поверх работающей логики, а не наоборот.

После этого разработчик запускает streamlit run app.py и смотрит на результат прямо в браузере. Если что-то выглядит не так — переставил виджеты местами, поменял текст, добавил ещё один график, — достаточно сохранить файл: библиотека сама подхватывает изменения и предлагает перезапустить страницу. Такой цикл «поправил код → увидел результат» намного короче, чем в проектах с отдельным фронтендом, где изменение одного компонента часто требует пересборки всего приложения.

Когда локальная версия работает так, как нужно, код заливают в репозиторий на GitHub и подключают его к сервису публикации — если выбран путь через Streamlit Community Cloud. С этого момента у приложения появляется постоянная публичная ссылка, и любые последующие правки в репозитории подтягиваются на неё автоматически.

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

Как разместить готовое Streamlit-приложение

Написанный скрипт запускается локально одной командой в терминале:

streamlit run app.py

После этой команды Streamlit поднимает локальный веб-сервер и открывает приложение в браузере, обычно по адресу вроде http://localhost:8501. Это удобно для разработки и тестов на своём компьютере, но такой адрес видишь только ты, пока сервер запущен у тебя на машине.

Чтобы показать приложение другим людям, его нужно куда-то опубликовать. Самый простой бесплатный вариант для несложных проектов — Streamlit Community Cloud, официальный сервис от авторов библиотеки. Логика примерно такая: код лежит в репозитории на GitHub, ты подключаешь этот репозиторий к сервису через веб-интерфейс, указываешь, какой файл запускать, и сервис сам разворачивает приложение по отдельной публичной ссылке. Обновил код в репозитории — приложение обновилось само при следующем запуске.

Такой конвейер похож на то, что происходит на курсе при публикации «Змейки» на GitHub Pages: код лежит в репозитории, а внешний сервис следит за изменениями и обновляет опубликованную версию. Разница в том, что GitHub Pages отдаёт статичные файлы, а Streamlit Community Cloud держит для приложения работающий python-процесс, потому что логика в нём выполняется на сервере, а не просто показывается в браузере.

Точные лимиты бесплатного тарифа — количество приложений на аккаунт, ограничения по вычислительным ресурсам, поведение при долгом отсутствии обращений — на момент чтения статьи могут отличаться от того, что было на момент её написания. Актуальные условия смотри на официальном сайте сервиса, прежде чем закладывать их в план проекта.

Кроме Community Cloud, Streamlit-приложение можно развернуть и другими способами: на собственном сервере, в облаке вроде AWS или Google Cloud, через Docker-контейнер. Это уже требует больше технических навыков, чем публикация через GitHub, зато даёт полный контроль над инфраструктурой — актуально, если данные приложения чувствительные и им не место на стороннем бесплатном сервисе.

Может ли ИИ писать код на Streamlit

Да, и разница с курсом здесь только в стеке, а не в принципе работы. Streamlit-приложение — это обычный python-код, а Python Claude Code понимает и пишет так же уверенно, как JavaScript и TypeScript для Next.js-проектов на курсе. Если попросить ИИ собрать дашборд на Streamlit — загрузку файла, таблицу, пару графиков и фильтр по датам, — он справится с этим так же, как справляется со сборкой «Змейки»: распишет структуру, напишет функции, объяснит, что делает каждая часть.

Промпт для такой задачи по сути устроен так же, как промпты для «Змейки» на курсе: описываешь, что должно происходить, а не как именно писать код. Например: «сделай приложение на Streamlit, куда можно загрузить CSV с результатами игроков, показать таблицу и график среднего счёта по датам, добавь фильтр по минимальному счёту в боковой панели». ИИ понимает такую формулировку и превращает её в рабочий скрипт с нужными вызовами st.file_uploader, st.dataframe, st.line_chart и st.sidebar — тем самым набором виджетов, который разобран выше.

Разница в другом. На курсе ты учишься ставить задачи ИИ в связке с полноценным фронтендом — компонентами, состоянием интерфейса, адаптивной вёрсткой, — потому что цель курса именно такая: собрать продукт, который можно показать миру. Если бы вместо этого стояла задача быстро проверить гипотезу на своих данных, тот же навык работы с ИИ-ассистентом пригодился бы и для Streamlit-проекта, просто результат выглядел бы иначе и решал бы другую задачу.

Стоит держать в голове: инструмент выбирают под задачу, а не задачу подгоняют под знакомый инструмент. Если по итогам курса возникнет мысль «а не собрать ли рабочий дашборд для анализа продаж на Streamlit» — это разумный шаг, и навыки постановки задач ИИ, полученные на «Змейке», прямо туда и перенесутся, разве что синтаксис команд в промптах будет другим.

Если Streamlit-приложению нужно хранить данные не в загружаемом файле, а в постоянной базе — например, чтобы несколько человек видели общий, обновляемый набор записей, — принципы работы с базой данных те же, что разбираются на курсе для «Змейки» с общей таблицей рекордов. С основами баз данных для новичка стоит разобраться отдельно — этому посвящена статья базы данных для новичка.

Если тебе только предстоит настроить окружение для работы с Claude Code и разобраться, что такое Node.js и зачем он нужен даже в проектах, где основной язык — Python, об этом подробно рассказано в статье что такое Node.js. А если хочется прокачать сам навык формулировать задачи для ИИ так, чтобы код получался с первого раза, читай как писать промпты для Claude Code.

Частые вопросы

Streamlit — это фреймворк или библиотека?

Библиотека для Python. Ты подключаешь её к обычному скрипту через import streamlit, и она добавляет функции для отрисовки интерфейса. Фреймворком в строгом смысле её не называют, потому что она не задаёт архитектуру всего проекта — просто превращает скрипт в веб-страницу.

Нужно ли знать HTML и CSS, чтобы работать со Streamlit?

Нет, в этом и смысл инструмента. Все элементы интерфейса — кнопки, поля, графики, таблицы — вызываются готовыми python-функциями. Знание HTML и CSS не помешает, если захочется тонкой кастомизации через продвинутые возможности библиотеки, но для базовой работы оно не требуется.

Чем Streamlit отличается от Flask и Django?

Flask и Django — тоже python-инструменты для веб-разработки, но устроены иначе: ты сам пишешь и бэкенд, и HTML-шаблоны, у тебя полный контроль над структурой сайта. Streamlit специально упрощает эту работу для конкретного сценария — быстрой сборки интерфейсов вокруг данных и моделей, жертвуя гибкостью ради скорости.

Можно ли сделать на Streamlit коммерческий продукт для внешних пользователей?

Технически можно, но обычно это не то, для чего библиотеку задумывали. Ограниченная кастомизация дизайна, полный перезапуск скрипта при каждом действии и сама архитектура сильнее подходят для внутренних инструментов и демонстраций, чем для публичного продукта с большим количеством одновременных пользователей. Для полноценного продукта лучше подходит связка вроде Next.js.

Работает ли Streamlit на телефоне?

Приложение открывается в мобильном браузере, и базовая адаптация под маленький экран есть из коробки. Но это не замена нативному мобильному приложению или продуманной мобильной версии сайта — тонкой настройки под конкретные размеры экранов Streamlit не даёт.

Что делать, если данные приложения не должны быть видны всем подряд?

Заранее продумать способ ограничить доступ — это касается любого веб-инструмента, не только Streamlit. У сервисов для публикации обычно есть свои настройки видимости приложения, а для чувствительных данных стоит рассмотреть развёртывание на собственном сервере вместо публичного бесплатного сервиса. Ключи доступа и пароли в любом случае не должны храниться прямо в коде.

Можно ли встроить в Streamlit-приложение уже готовую модель машинного обучения?

Да, это один из самых частых сценариев использования библиотеки. Если модель уже обучена и сохранена в файл, в скрипте её достаточно загрузить и вызвать так же, как в обычном python-коде — вне зависимости от того, что делали её обучение и подготовку данных в другом инструменте. Streamlit добавляет вокруг этой логики только интерфейс: поле для ввода данных, кнопку «предсказать» и место, куда вывести результат. Обучать модель прямо внутри Streamlit-приложения обычно не имеет смысла — библиотека для этого не предназначена, она про интерфейс, а не про тренировку моделей.

Сколько стоит Streamlit Community Cloud?

На момент написания статьи у сервиса есть бесплатный тариф для публикации приложений из GitHub-репозитория. Точные условия, лимиты и возможные платные тарифы могут меняться, поэтому актуальные цифры смотри на официальном сайте Streamlit, прежде чем планировать проект под конкретные ограничения.

Заключение

Streamlit решает конкретную задачу: быстро превратить python-скрипт в рабочий интерфейс без отдельной фронтенд-разработки. Для аналитика, который хочет за час показать команде дашборд, или для того, кто проверяет гипотезу на своих данных, это может быть быстрее любого другого пути. Расплата — ограниченный дизайн и архитектура, которая не рассчитана на большой публичный продукт.

Курс skillmake учит другому: собирать продукт, который можно показать миру, с собственным дизайном и через Claude Code как исполнителя. Оба пути используют один и тот же навык — умение чётко ставить задачу ИИ-ассистенту, — просто применяют его к разным стекам и разным целям. Разобраться, какой инструмент нужен именно тебе, проще после того, как попробуешь хотя бы один проект от начала до конца, и «Змейка» на курсе для этого подходит.