reveal.js: Temalar, Dışa Aktarma ve Alternatiflerle Karşılaştırması

Kod yazıyorsanız ve bir sunum yapmanız gerekiyorsa, muhtemelen reveal.js ile karşılaşmışsınızdır. İzlediğiniz geliştirici konferansı slaytlarının büyük bir kısmının arkasındaki açık kaynaklı çerçevedir: her slaydı HTML veya Markdown ile yazarsınız ve o, herhangi bir tarayıcıda bir web sayfası olarak çalışır — temalar, geçişler, parça animasyonları, konuşmacı notları ve yerleşik yerel PDF dışa aktarmayla birlikte. GitHub'da 71,9k yıldız ve MIT lisansıyla, "PowerPoint açmadan nasıl slayt yaparım" sorusunun varsayılan cevabıdır.

Bu rehber onun dürüst bir haritasıdır. reveal.js'in gerçekte ne olduğu, temaların, şablonların ve örneklerin nasıl bir araya geldiği, PDF ve PowerPoint'e dışa aktarmanın gerçekte nasıl davrandığı (bir tuzağı var), diğer açık kaynak adaylar karşısında nasıl durduğu ve — çoğu yazının atladığı kısım — böyle bir çerçevenin ne zaman doğru araç olmaktan çıkıp yerini başka bir şeye bıraktığı. Bir yapay zeka ve ajan destekli sunum iş akışı için seçeneklerinizi tartıyorsanız, reveal.js'in ne olduğunu ve ne olmadığını tam olarak bilmek işinize yarar.

reveal.js nedir

reveal.js kendini "The HTML Presentation Framework" olarak tanımlar ve bu tanım isabetlidir. Açıp içinde tıklayarak gezdiğiniz bir uygulama değildir — bir HTML dosyasına yerleştirdiğiniz bir JavaScript kütüphanesidir. Her slayt bir <section> öğesidir; section'ları iç içe koyarsanız dikey slaytlar elde edersiniz. Her şeyi CSS ile biçimlendirir, geçişleri ve parçaları data öznitelikleriyle bağlar ve sayfayı bir tarayıcıda açarak sunarsınız. Çıktı bizzat bir web sayfası olduğundan, web'in yapabildiği her şey — canlı kod, gömülü video, iframe'ler, WebGL, kendi bileşenleriniz — bir slaytta yaşayabilir.

Ödünleşim, tanımın tam içindedir: bu, bir GUI değil, bir geliştirici çerçevesidir. Araçlarınız, sürükleme tutamaçlı bir tuval değil, bir kod düzenleyici ve bir tarayıcıdır. Geliştiricilerin onu sevmesinin sebebi tam olarak budur — tam sürüm denetimi, tam CSS denetimi, özel dosya biçimi yok — ve kod yazmayan birinin ondan sekmesinin sebebi de tam olarak budur. Ayrıca gerçekten ücretsizdir: hesap yok, filigran yok, dışa aktarma sınırı yok, koltuk başına ücret yok. HTML sizindir.

Temalar, şablonlar ve örnekler

reveal.js etrafındaki aramaların çoğu aslında onu sıfırdan tasarlamadan iyi görünmesini sağlamakla ilgilidir, işte parçaların nasıl bir araya geldiği.

reveal.js temaları yerleşik başlangıç noktasıdır. Çerçeve, tek bir stil sayfası bağlantısını değiştirerek geçiş yaptığınız hazır bir tema seti getirir — Black, White, League, Beige, Sky, Night, Serif, Simple, Solarized ve dahası. Bir tema sadece CSS'tir, dolayısıyla "özel bir reveal.js teması" yazı tiplerinizi, renklerinizi ve başlık stillerinizi ayarlayan bir Sass/CSS dosyası yazmak (ya da fork'lamak) demektir. Bir tema mağazası yoktur; stil sayfalarını düzenlersiniz.

reveal.js şablonları ve örnekleri tek bir resmi galeriden çok topluluk içinde yaşar. Depo örnek sunumlarla gelir, dokümantasyon sitesi (revealjs.com) kaynağını okuyabileceğiniz bir reveal.js sunumunun ta kendisidir ve GitHub başlangıç şablonları, iskelet projeler ve çerçeve sarmalayıcılarıyla doludur. "reveal js examples" arıyorsanız, sinyali en güçlü olan resmi sitenin kendi kaynağıdır — neredeyse her özelliği yerinde gösterir. Yeni başlayanlar için tuzak: buradaki bir "şablon", içini doldurduğunuz bir tasarım dosyası değil, klonlayıp düzenlediğiniz bir kod deposudur.

PowerPoint ve PDF'e dışa aktarma

PDF dışa aktarma birinci sınıf, yerleşik bir özelliktir ve iyi çalışır. Sunumunuzun URL'sine ?print-pdf ekleyin, tarayıcınızın yazdırma penceresini açın, "PDF olarak kaydet" seçin ve reveal.js her slaydı kendi sayfasına yeniden akıtsın. Bu temiz, desteklenen yoldur — elde ettiğiniz PDF tam olarak slaytlarınız gibi görünür.

reveal.js'i PowerPoint'e dışa aktarmak, beklentilerin yönetilmesi gereken yerdir. Düzenlenebilir bir PowerPoint dosyası üreten yerel bir "farklı kaydet .pptx" yoktur. Pratik yol PDF → PPTX dönüştürmedir ve bu dönüştürme kayıplıdır: her slayt PowerPoint'e düzenlenebilir metin kutuları, şekiller ve düzenler olarak değil, düz bir görüntü olarak gelir. Yani aşağı akışta biri sunumunuzu PowerPoint'te açıp düzenlemesi gerekiyorsa — bir başlığı yeniden yazmak, bir grafiği yeniden biçimlendirmek, bir maddeyi yeniden akıtmak — reveal.js bunu ona veren araç değildir. Tarayıcıdan sunulmak üzere yapılmıştır ve düzenlenebilir kaynağı .pptx değil, HTML'dir. Başlamadan önce bunu bilmek, bir meslektaşınızın "PowerPoint'i" istediği gün yaşayacağınız acı verici bir sürprizden sizi kurtarır.

reveal.js alternatifleri ve karşılaştırması

Slaytları kod olarak yazmanın tek yolu reveal.js değildir. En yakın iki açık kaynak alternatif — insanların "reveal.js alternatifi" derken kastettikleri — Slidev ve Marp'tır ve dürüst olmakta fayda var: Open Design kafa kafaya rekabet etmek yerine tamamen farklı bir katmanda yer alır.

Araç	Yazım	Düzenlenebilir .pptx	Şablonlama	Lisans
reveal.js	HTML veya Markdown	Hayır (PDF→PPTX kayıplı görüntülerdir)	Temalar = CSS/Sass; topluluk şablonları	MIT
Slidev	Markdown + Vue	Hayır (görüntü/PDF dışa aktarma)	Vue bileşenleri + temalar	MIT
Marp	Yalnızca Markdown	Hayır (PDF/PPTX görüntü olarak)	Markdown temaları (CSS)	MIT
Open Design	Ajanınıza tarif edin	Evet — bir tasarım sistemine karşı düzenlenebilir çıktı	Birinci taraf sunum şablonları	Apache-2.0

Slidev felsefi olarak en yakın kardeştir: altında Vue bileşenleriyle Markdown öncelikli olduğundan, reveal.js'in ham HTML özgürlüğünün bir kısmını daha yapılandırılmış, geliştirici dostu bir yazım akışıyla takas eder. Vue/Vite dünyasında yaşıyor ve canlı kod demoları istiyorsanız, Slidev doğal tercihtir. Marp ters yöne gider — yalnızca Markdown, bilinçli olarak minimal, bileşen yok — ki bu da slaytlarınız çoğunlukla metinken ve bir çerçeveyi hiç düşünmek istemediğinizde onu en hızlı yol yapar.

Üçü de aynı temel biçime sahip kod öncelikli çerçevelerdir: sunumu yazarsınız, bir tarayıcıda sunarsınız ve düzenlenebilir PowerPoint çıktısı asıl mesele değildir. Aralarında seçim yapmak çoğunlukla hangi yazım yüzeyini istediğinizle ilgilidir (ham HTML, Vue Markdown veya düz Markdown) — birinde olup diğerlerinde eksik olan yeteneklerle değil.

Open Design nereye oturur

İşte dürüst sınır. reveal.js sizden sunumu yazmanızı ister — her slaydı, kodla. Elle işlenmiş HTML denetimi istiyorsanız bu bir artıdır ve amacınız buysa buradaki hiçbir şey onun yerini tutmaz.

Open Design farklı bir katmandır ve bizim yaptığımız bir üründür, dolayısıyla bunu akılda tutarak okuyun. Zaten kullandığınız kodlama ajanının — Claude Code, Codex veya Cursor — dışında duran, açık kaynaklı (Apache-2.0), yerel öncelikli, kendi anahtarını getir modelinde bir Agent-Native Design Workspace'tir. HTML'i elle yazmak yerine istediğiniz sunumu tarif edersiniz ve ajan onu bir tasarım sistemine karşı düzenlenebilir olarak üretir, böylece marka uyumlu çıkar ve işlenmiş bir yapıt olarak donmak yerine düzenlenebilir kalır. Open Design ayrıca başlayabileceğiniz birinci taraf sunum şablonları da sunar.

İstediğiniz şey slaytları tam CSS denetimiyle kod olarak yazmaksa, Open Design reveal.js'in yerini tutmaz — orası reveal.js'in kendi sahasıdır ve orada mükemmeldir. Open Design, işaretleme yazmaktansa bir ajana brief vermeyi tercih ettiğiniz, çıktının birçok sunum boyunca bir tasarım sistemiyle uyuşmasını istediğiniz ve sonunda size ait düzenlenebilir dosyalar istediğiniz durum içindir. Sunum bizzat yazdığınız kodken reveal.js'e uzanın; sunum bir ajanın sizin için ürettiği çok sayıda marka uyumlu çıktıdan biriyken bir çalışma alanına uzanın.

Sıkça sorulan sorular

reveal.js ücretsiz mi? Evet. reveal.js MIT lisansı altında açık kaynaktır — ticari kullanım için ücretsiz, hesapsız, filigransız ve dışa aktarma sınırı olmadan. HTML'i kendiniz barındırırsınız.

Bir reveal.js temasını nasıl eklerim veya değiştiririm? reveal.js, tek bir stil sayfası bağlantısını değiştirerek yer değiştirdiğiniz yerleşik temalarla gelir (Black, White, League, Sky, Night, Serif ve dahası). Özel bir tema, kendi yazı tipleriniz ve renklerinizle bir CSS/Sass dosyası yazmak veya fork'lamak demektir — göz atılacak bir tema mağazası yoktur.

reveal.js'i PowerPoint'e dışa aktarabilir miyim? Düzenlenebilir bir .pptx'e değil. reveal.js PDF'e temiz biçimde dışa aktarır (?print-pdf ekleyip tarayıcınızdan PDF'e yazdırın). O PDF'i PowerPoint'e dönüştürmek mümkün ama kayıplıdır — her slayt düzenlenebilir metin ve şekiller olarak değil, düz bir görüntü olarak iner. Düzenlenebilir bir PowerPoint'e ihtiyacınız varsa, reveal.js doğru kaynak değildir.

reveal.js vs Slidev vs Marp — hangisini kullanmalıyım? Üçü de açık kaynak, kod öncelikli ve MIT lisanslıdır. Ham HTML denetimi için reveal.js'i, Markdown artı Vue bileşenleri için (canlı demolar için harika) Slidev'i ve en basit yalnızca Markdown sunumlar için Marp'ı seçin. Hiçbiri düzenlenebilir PowerPoint çıktısını hedeflemez.

reveal.js kullanmak için kod bilmem gerekir mi? Fiilen, evet. reveal.js bir geliştirici çerçevesidir — sürükle-bırak bir GUI'de değil, HTML, Markdown ve CSS ile bir metin düzenleyicide çalışırsınız. Bunun yerine bir sunumu sade bir dille tarif etmek istiyorsanız, işte Open Design gibi agent-native bir çalışma alanının doldurduğu boşluk budur.

Özetle

reveal.js 71,9k yıldızını hak ediyor: bir tarayıcının çalıştığı her yerde çalışan slaytları oluşturmanın ücretsiz, MIT lisanslı, HTML yerel bir yolu; gerçek temalar, temiz PDF dışa aktarma ve tam CSS denetimiyle. Yalnızca gözünüz açık girin — bu, içinde yazdığınız bir çerçevedir, tıklayarak geçtiğiniz bir uygulama değil ve "düzenlenebilir PowerPoint'e dışa aktarma" onun yaptığı bir şey değil. Sunumları kod olarak yazmak istiyorsanız, reveal.js (veya Slidev / Marp) harika bir yuvadır. Bir sunumu tarif edip ajanınızın size ait, düzenlenebilir ve marka uyumlu bir tane üretmesini tercih ediyorsanız, işte orada bir Agent-Native Design Workspace devreye girer.