Представьте ситуацию: вам прислали контракт или учебный материал в PDF. Нужно быстро поставить подпись, обвести важный абзац или добавить пару комментариев. Идти в Adobe Acrobat долго, а загружать документ на сомнительные онлайн-сервисы небезопасно.

Я столкнулся с этой проблемой и решил сделать свой инструмент. Так появился проект Annotate PDF. 

Это простая "рисовалка" поверх документов, которая работает полностью в браузере.

Аннотации PDF в браузере
Аннотации PDF в браузере

Как это родилось?

Проект начинался как классическая идея для буткемпа. Нам нужно было выбрать идею и за короткое время собрать полезный MVP. Я решил не плодить очередные To-Do листы, а разобраться с тем, как устроены документы.

Техническая магия: война координат

Самое сложное в разработке PDF-редактора это синхронизация координат. В вебе (и в Fabric.js) начало координат (0,0) находится в левом верхнем углу, а ось Y идет вниз. В спецификации PDF все наоборот: точка (0,0) — это левый нижний угол, а Y растет вверх.

Чтобы ваши пометки при сохранении не улетели "в космос", пришлось внедрять систему маппинга.

Формула пересчета координат выглядит так:

Здесь $C$ — координаты на холсте в браузере, а $P$ — итоговые пункты в PDF.
Здесь $C$ — координаты на холсте в браузере, а $P$ — итоговые пункты в PDF.

Что под капотом?

Основная фишка приложения: полное отсутствие сервера для обработки файлов. Документ не покидает ваше устройство. Это дает и безопасность, и скорость.

Стек технологий выглядит так:

* Next.js / Tailwind: стандарт для быстрой верстки и SEO.

* Fabric.js: мощная библиотека для работы с объектами на холсте (фигуры, текст, кисти).

* PDF.js: движок от Mozilla для рендеринга страниц.

* pdf-lib: библиотека для финальной сборки нового файла на стороне клиента.

Нюансы реализации

Для многостраничных документов я использую ленивую инициализацию. Мы не можем создать сто тяжелых холстов Fabric.js сразу — браузер просто "съест" всю память. При переключении страницы текущее состояние сохраняется в JSON, а холст очищается и загружает новые данные.

Что умеет Annotate PDF

В приложении доступно более десяти инструментов для полноценной работы с документами. Основной упор сделан на то, чтобы закрыть 90% повседневных задач обычного пользователя.

Работа с текстом и заметками

Вы можете кликнуть в любом месте документа выделить текст нужным цветом или начать печатать. Для текста настраивается всё: цвет, размер и даже семейство шрифтов (поддерживаются стандартные и Google Fonts). Это удобно, если нужно заполнить анкету или оставить подробный комментарий коллеге.

Как выделять текст в пдф
Как выделять текст в пдф

Рисование и подписи

Инструмент свободного рисования (Draw) позволяет делать рукописные пометки. Он идеально подходит для создания подписей с помощью мышки или тачпада. После создания подпись можно сохранить в правой панели и использовать повторно, меняя её размер и положение.

Как поставить подпись в пдф документе
Как поставить подпись в пдф документе

Геометрия и выделение

Для акцентов есть набор стандартных фигур: стрелки, линии, прямоугольники и круги. Если нужно подсветить важный фрагмент, используется инструмент хайлайтера. А для защиты вашей приватности предусмотрена функция замазки (Whiteout), которая позволяет надежно скрыть конфиденциальные данные в файле перед его отправкой.

Как добавить стрелки и фигуры в пдф
Как добавить стрелки и фигуры в пдф

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

Как всё запорол

В течении года проект закрепился на первой странице поиска и казалось что всё идёт хорошо. И тут я допустил фатальную ошибку

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

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

Что дальше

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

Браузернное расширение для аннотации пдф файлов
Браузернное расширение для аннотации пдф файлов

В планах есть мысли добавить несколько маленьких улучшений:

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

  2. Более продвинутые инструменты выделения текста.

  3. Сохранить цвета чтобы их можно было использовать на других инструментах

Если вам нужно быстро и безопасно подписать документ или сделать заметки к лекции — заходите на https://annotatepdf.io/ru

Буду рад критике и предложениям в комментариях. Признаю, что проект местами «код на коленке», но он работает и решает задачу.