コードエディタが大幅にアップデートされました！

※この記事は2026年04月13日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Redesigned code editors with Emmet and auto-complete

‍

Webflowのコードエディタが、統一された新しい編集体験としてリニューアルされました。

Code Block、Code Embed、Page Settingsのカスタムコード、Dashboardのカスタムコードなど、すべてのコード編集機能が共通エディタへ統合され、検索・置換、Emmet入力補完、自動補完機能など、開発効率を高める機能が追加されています。

統一されたコード編集体験

すべてのコード編集画面で、共通のモダンなエディタが利用可能になりました。

• 検索ボタンや[Cmd+F / Ctrl+F] による検索・置換に対応
• Code Block / Code Embed をリサイズ・移動可能なモーダルで編集可能
• HTMLタグや括弧を自動補完
• VS Codeライクな新カラースキームを採用
• Prettierによるコード整形とHTML / CSS / JavaScriptのバリデーションに対応
• 50,000文字制限への警告表示を追加
• 未保存変更の検知機能を搭載

Emmet入力補完に対応

コードエディタでは、Emmetの略記入力が利用可能になりました。

たとえば[ul>li*5]や[div.container]のような省略記法を入力し、Tabキーを押すことでHTMLへ展開できます。

Code Embed、Page Settings、DashboardカスタムコードではHTMLおよび[<style>]タグ内CSSに対応。Code Blockでは、HTML / CSS / JSX / TSX でも利用できます。

スタイル・変数の自動補完機能を追加

カスタムコード記述時に、サイト内で利用しているクラス名や変数を自動補完できるようになりました。

入力中に候補が表示されるため、クラス名や変数名を覚えておく必要がなく、複雑なサイトでもスタイルパネルとコードエディタを行き来する手間を減らせます。

対応箇所は以下の通りです。

• Code Block
• Code Embed
• Page Settings のカスタムコード
• Dashboard のカスタムコード

‍