Связь двух или более вкладок браузера, который может быть лучшим методом?

Я хочу разработать небольшую (по крайней мере, самые базовые) среду IDE для создания веб-сайтов и приложений с HTML, CSS, Javascript и полным стеком LAMP.

Одна из вещей, которые я хотел бы сделать, — это открыть окно предварительного просмотра на другой вкладке браузера (вместо того, чтобы открывать его на вкладке в кодировке HTML ( <div> элемент или аналогичный), как это делает Dreamweaver) или даже в режиме исходного кода, возможность отображать набор инструментов на другой вкладке браузера и перемещать эту вкладку на второй экран (или даже на третий, хотя у меня есть только один дисплей, но это для иллюстрации моей ситуации).

После развертывания на другой вкладке браузера я хочу, чтобы каждая вкладка браузера отражала любые изменения, внесенные в любую из других вкладок браузера.

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

У меня есть мысли о том, как подходить к структурам данных, как выполнять предварительный просмотр, кэширование данных, хранение данных проекта и т. Д.

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

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

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